css的布局与版心布局

css版心布局

1、css中的布局有：

常见的布局方式：固定布局、流式布局、弹性布局、浮动布局、定位布局、margin和padding

2、多种等高布局

a. 假等高列：使用背景图片，在列的父元素上使用这个背景图进行Y轴的铺放，从而实现一种等高列的假像

b. 给容器div使用单独的背景色（固定布局）（流体布局）：用元素中的最大高度撑大其他的容器高度

c. 创建带边框的两列等高布局：用border-left来做，只能使用两列。

d. 使用正padding和负margin对冲实现多列布局方法：在所有列中使用正的上、下padding和负的上、下margin，并在所有列外面加上一个容器，设置overflow:hiden把溢出背景切掉

e. 使用边框和定位模拟列等高：但不能使用在多列

f. 模仿表格布局等高列效果：兼容性不好，在ie6-7无法正常运行

3、版心布局

1. 版心定义：网页主体内容所在的区域
2. 布局流程： 由外到内，由大到小
1. 确定页面的版心（可视区域）
2. 分析页面中的行模块，以及行模块中的列模块
3. 制作HTML结构
4. css初始化，然后通过盒子模型的原理，通过div+css布局来控制网页的各个模块。
3. 布局分类
1. 一列宽度且居中
2. 两列左窄右宽
3. 通栏平均分布型