- 圣杯布局和双飞翼布局是一样的，都是两边固定宽度，中间自适应的三栏布局，中间栏要放在文档流前面以优先渲染。
- 不过两者实现方式上有些区别
圣杯布局
圣杯布局要求
- header和footer各自占领屏幕所有宽度，高度固定。
- 中间的container是一个三栏布局。
- 三栏布局两侧宽度固定不变，中间部分自动填充整个区域。
- 中间部分的高度是三栏中最高的区域的高度。
实现过程（顺序无所谓）：
1、先定义好header 和footer，container 和其中的left , right ,middle.其中middle在最前面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>圣杯布局练习</title>
<link href="css/shengb.css" rel="stylesheet">
</head>
<body>
<!--header和footer各自占领屏幕所有宽度，高度固定。
中间的container是一个三栏布局。
三栏布局两侧宽度固定不变，中间部分自动填充整个区域。
中间部分的高度是三栏中最高的区域的高度。 -->
<header>
header
</header>
<div class="container">
<div class="middle">middle<p>hello</p></div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<footer>
footer
</footer>
</body>
</html>
为提高代码优化，css样式建议加入以下。
* {
box-sizing: border-box;
}
body {
margin: 0;
color: #fff; /*为了适应背景 把字体颜色调成白色*/
}
2、设置footer和header的样式
header {
width: 100%;
height: 50px;
background: #6daca7;
line-height: 50px;
text-align: center;
}
footer {
width: 100%;
height: 30px;
background: #52797a;
clear: both;
line-height:30px;
text-align: center;
}
3、分别设置left , middle ,right 的样式， 左边宽度为200px， 右边宽度为150px， 中间宽度为100%
并且设置为相对定位，左浮动。
.left , .right, .middle {
position: relative;
float: left;
}
.left {
width: 200px;
background: #1b4887;
}
.right {
width: 150px;
background: #578353;
}
.middle {
width: 100%;
background: #138686;
}
这时候的布局是这样的：
4、这时候把左边left的margin-left设置为-100%,把它推到middle的左边
5、这时我们发现left把middle遮住了，看上面的middle不见了。只需要在container上加上 padding-left: 200px;padding-right: 150px;，在左右两边为left 和 right 留出空间（ left 和 right 的宽度）。
6、 接下来把left左移，用到相对定位。在left盒子上设置left属性为-200px（刚好是left的宽度），这样left的位置就对了，也没有遮住middle。
7、接下来把right移动到正确的位置。只需要设置margin-right: -150px。把它推到middle的右边。
总结：只要是float的盒子，它就是脱离普通流的。
双飞翼布局
1.双飞翼布局DOM结构
<header>我是双飞翼头部区域</header>
<div id="middle">
<div id="inside">我是中间区域</div>
</div>
<div id="left">我是左侧</div>
<div id="right">我是右侧</div>
<footer>我是双飞翼底部区域</footer>
2.双飞翼布局思路
-
header、footer宽度100%，同圣杯布局第一步；
-
left、right、middle三个区域全左浮动，同圣杯布局第二步；
-
left、right设置margin-left，让左靠左，右靠右，此时left、right遮挡了middle区域同圣杯第三步；
-
将被middle包裹的inside设置margin:0 200px; 给左右留出空间；
-
给左侧设置：margin-left: -100%; 给右侧设置：margin-left: -200px; 让左靠左，右靠右，完成双飞翼布局。
3.双飞翼布局最终CSS样式：
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: #FFFFE0;/*便于观看加的样式*/
}
header{
height:30px;
background: gray;
text-align: center;
}
footer{
clear: both;
height:30px;
background: gray;
text-align: center;
}
#middle{
float:left;
width:100%;
text-align: center;
}
#left{
float:left;
width:200px;
text-align: center;
margin-left: -100%;
background:yellowgreen;
}
#right{
float:left;
width:200px;
text-align: center;
margin-left: -200px;
background:lightpink;
}
/*给内部div添加margin，把内容放到中间栏，其实整个背景还是100%*/
#inside{
background-color: orange;
text-align: center;
margin:0 200px;
}
</style>
圣杯解决被遮盖的方式：
在最开始用容器包裹了：左、中、右，随后通过设置包裹容器container的padding，让中间区域左右留白，也就是说圣杯布局的左、中、右是完全独立的，他们之间是有缝隙的（如果缝隙可见的话）
例如我们接下来：
-
给container加一个蓝色背景色，并且设置高一些的高度。
-
去左、中、右的等高布局，给middle再加一行文字。
左、中、右是独立的三个区域，都处于一个层级，都由container这个容器（蓝色）承接，左右两侧是靠container的padding留出来的。
双飞翼解决被遮盖的方式：
双飞翼采用只处理中间解决遮盖问题，先给中间的包裹器middle加margin，让出左右空间，然后给left、right设置margin为负，把自己推上去。
左、中、右是独立的三个区域，中间区域属于最上面的层级（inner那个div），左右两侧和middle容器一个层级
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
