圣杯布局
- 在html中，先把中间的主区块middle放在容器的最前面，接着是left，最后是right。这样可以先渲染重要的区块，有利于搜索引擎优化。
<div class="wrapper">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
- 圣杯布局是实现左右宽度固定，中间自适应。
.main{
width: 100%;
background: blue;
height: 300px;
}
.left{
width: 200px;
height: 300px;
background: red;
}
.right{
width: 150px;
height: 300px;
background: orange;
}
- 将三栏都设置为左浮，这样两个侧边栏才能到中间区块的middle上面去。
.main, .left, .right{
float: left;
}
- 再利用负margin让左边栏和右边栏跑到中间区块的两边。对左边栏设置margin-left: -100%，右边栏的margin-left设置为自身的宽度。这样两个侧边栏就会分别覆盖中间区块的左右边。
.left{
margin-left: -100%;
}
.right{
margin-left: -150px; /* 右边栏自身的宽度 */
}
- 到上一步为止，left和right栏已经到了正确的位置，接下来是要解决覆盖的问题。圣杯布局的解决方案是先对包裹三栏的容器设置好padding。可以上下为0，左右分别为左右两栏的宽度。
.wrapper{
padding: 0 150px 0 200px;
}
- 接着，再利用相对定位，把左右两栏分别移动到对应的padding上去。
.left{
position: relative;
left: -200px;
}
.right{
position: relative;
right: -150px;
}
双飞翼布局
- 首先和前面圣杯布局一样，中间的主区块main放在html的最前面，接着是子列sub和附加列extra。然后利用负外边距让sub和extra回到正确的位置。
- 接着面临一个同样的问题，那就是sub和extra覆盖了main的左右两边的内容。双飞翼布局就是在main的外部再加一个div标签来包裹中间区块，宽度为100%。然后再设置main的左右外边距，使它回到对应的位置。
html结构：
<div class="wrapper">
<div class="middle">
<div class="main">你好</div>
</div>
<div class="sub"></div>
<div class="extra"></div>
</div>
CSS部分：
.middle .main{
margin-left: 200px;
margin-right: 150px;
}
