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. 通栏平均分布型
原文地址:https://www.cnblogs.com/wenaq/p/13513004.html