一：圣杯布局与双飞翼布局两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适的三栏布局
两者遵循特点：1 两侧宽度固定，中间宽度自适应；2 中间部分在DOM结构上优先，以便先行渲染；3 允许三列的任意一列称为最高列；4 只需使用一个额外的<div>标签。
二：圣杯布局：
看所做的效果图 ：
将三个div标签分布，两侧宽度固定，中间宽度适应。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style>
body{
margin: 0;
padding: 0;
}
.container{
/*设置最小宽度*/
min-width: 400px;
height: 200px;
background-color: red;
/*预留出位置*/
padding: 0 200px;
}
.left, .right{
width: 200px;
height: 200px;
background-color: green;
float: left;
}
.main{
width: 100%;
height: 200px;
background-color: blue;
float: left;
}
.left{
margin-left: -100%;
position: relative;
left: -200px;
}
.right{
margin-left: -200px;
position: relative;
right: -200px;
}
</style>
</head>
<body>
<!--称为容器-->
<div class="container">
<div class="main">中间栏</div>
<div class="left">左边栏</div>
<div class="right">右边栏</div>
</div>
</body>
</html>二 双飞翼布局：
首先双飞翼布局不仅能满足main处于优先加载的地位，而且更好的解决了圣杯布局的错乱问题，并且css代码简单，但缺点是增加了一个标签。
看效果图：
和圣杯功能相同，目的一样，就是比圣杯布局简单。
上边就是常用css布局，圣杯布局与双飞翼布局。
两者的优缺点：优点：1 双飞翼布局完美解决圣杯布局错乱问题；2 双飞翼布局css代码逻辑简单。
缺点： 双飞翼添加了无意义标签。
2897
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
