单列布局：
l 顶部宽度占满整个页面：对top只设置height而不设置width（设置width为100%），main部分设置width，height自动
l 盒子居中对齐 margin:0 auto
两列布局：
l 自适应，左右两栏宽度用百分比表示，高度设为相同的值，float分别为left和right
l 非自适应，左右两栏用main的div包围设置main的宽度和居中，左右两栏的
float和position:absolution可以使元素脱离文档流。
三列布局：
l 前面两列float为left最后一列为right
l 中间自适应：左右设定固定宽度中间不设定宽度，左右两边绝对定位，position:absolute;right(left):0;top:0;中间margin左右的宽度值即可margin:0 300px 0 200px;（自适应一栏不用设置display和float直接设置margin给别的栏留出空隙）
混合布局：
l top 和foot自适应： width：100%或者不设置width，只设置height
l left 宽度固定，right自适应；right先加载left后加载：left right放在main中间
main设置height和width（小于页面宽度设置margin：0 auto居中）position：relative
left设置width为固定值height position：absolute
right设置height不设置width margin-left为left宽度（多一点两块之间有空隙）
扫一扫
1975
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
