常见的页面布局

常见的页面布局

一、三栏布局

1.三列布局，中间宽度自适应，两边定宽；

2.中间栏要在浏览器端优先渲染；

3.允许任意列的高度最高；

4.要求只用一个额外的DIV标签；

5.要求用最简单的css；

二、多栏布局

1.栅栏格系统：利用浮动实现的多栏布局，在bootstrap中用的非常多；

2.多列布局：并没有实现真正实现分栏效果，css3为了满足这个要求，增加了多列布局；

三、弹性布局

css3新引入的一种布局，即伸缩布局，盒模型，

a.屏幕和浏览器窗口大小改变可以灵活调整布局；

b.可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩项目的大小；

c.可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间。

d.可以指定如何将垂直于元素布局轴的额外空间分配到该元素的周围；

e.可以控制元素在页面上的布局方向；

f.可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排序，也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。