单栏布局
- 一栏
注意：
width //无论什么时候 宽度都是设的值的大小 页面被缩放小于宽度时，会出现滚动条
max-width //最大宽度 如果页面宽度比设的值小 则会自动变小 不会有滚动条出现
- 通栏（头尾随页面大小一样）
为了头尾在拉大的时候显示不完全，给body加个min-width ，值等于内容的宽度
实现效果
两栏， 三栏
多个元素居中显示
.parent{
text-algin: center;
ver-algin: top; //高度不同，顶部对齐
}
.child{
display: inline-block;
}
或者
.parent{
margin: 0 auto;
}
- 双列布局
一列固定宽度，另一列自适应宽度
固定宽度的左浮float:left， 自适应宽度的margin-left：固定宽度的元素的宽度+间隙
父容器记得清浮动
实现效果
- 三列布局
两侧两列固定宽度，中间列自适应宽度
方法：两侧分别左浮，右浮，中间加左右margin。父容器记得清浮动
注意渲染顺序，先左右两列元素，最后中间自适应元素
实现效果
圣杯布局（缺点：中间元素宽度不能小于最小侧边元素的宽度）
同三栏布局效果，中间自适应宽度的元素在最前面渲染
方法：
父容器加左右padding 值分别是左右侧元素的宽度 + 间隙
三个元素都左浮，左侧元素负margin 100%，加position:relative,left 负值 本身宽度
右侧元素负margin 自身宽度，加position:relative,right 负值 本身宽度
中间自适应宽度元素宽度100%（相对于父元素）
实现效果
双飞翼布局（解决圣杯布局错乱缺点）
方法：大体和圣杯类似，但是中间自适应元素再加一层父容器，float：left和width: 100%加在父容器上, 内容（高度，背景色等）加在自身
实现效果
