1、单栏布局
Paste_Image.png
- 方法：（1）定宽，width, min-width, max-width （2）块级元素水平居中。
例：单栏布局（通栏）
Paste_Image.png
此种情况有个bug，在浏览器宽度低于设置宽度（960px）时，内容是可以滚动的，所以其宽度是960px，但header和footer在滚动区域不在填充，因为header和footer没有设置宽度，填充窗口即可，其宽度大小为窗口大小，所以在滚动部分不在填充。
解决方法，在header、footer或body上添加：min-width: 960px;
单栏布局
2、双列布局
一列固定宽度，另一列自适应宽度
方法：（1）浮动元素+普通元素margin
注意：浮动元素，需要注意浏览器的渲染顺序。
3、三栏布局
方法：旁边两栏固定宽度，中间栏宽度自适应
左右两栏float，中间栏设置margin-left与margin-right。因为中间栏是不浮动的块级元素，所以在html中应放在最后，浏览器最后渲染。
三栏布局
4、圣杯布局
main在html中前置，
两边aside，extra，固定宽度；main 宽度100%；
将 main, aside,extra 设置浮动；
对aside，extra设置负边距，使之上移。
父容器padding-left，padding-right；
对aside，extra设置position: relative；使之与main不重合。
圣杯布局
当浏览器缩小到一定程度时（aside的宽度大于main的宽度时），会出现错位。
5、双飞翼布局
解决圣杯布局的bug问题，main在html中前置。
双飞翼布局
