CSS——排版布局

1.满版100%布局：这个布局将整个页面切割为一块跟浏览器页面相同高度、宽度的块状区域，且会随着浏览器缩放而缩放区域大小。乍听之下，这个排版似乎有点多余，页面大小就已经显示在浏览器上了，为什么还要画蛇添足地再去定义？这是因为在预设的模式下，是依照100%的浏览器宽度来配置网页宽度，但是却以网页内容的高度来配置网页高度。也就是说，在预设模式下无法定义填满整个浏览器100%高度的网页内容。

上面范例的HTML文件，用来说明如何定义满版100%布局。这个范例示范了如何使用CSS样式，来定义高度相对于浏览器是100%的块状区域。

(1)针对网页的html标签、body标签定义了高度样式为100%，通过这两个高度样式，就能覆盖掉预设的高度定义：使用网页内容的高度来配置网页高度。而且因为这两个标签已经是浏览器最外层的标签，所以定义高度样式为100%就会是相对于浏览器的100%；

(2)网页中一个id属性为content的div标签，这个div标签定义高度为100%。这个div标签往上一直参考高度100%的大小，最终会参考到html标签、body标签，也就会让这个div标签高度相对于浏览器都是100%。

2.满版分列布局：这个布局将页面切割成为左右两个块状区域：左列固定宽度、右列缩放宽度填满配置区域。

3.满版分行布局：这个布局将页面切割成为上下两个块状区域：上边固定高度，下边缩放高度填满配置区域。

4.水平居中布局：这个布局将页面切割成一个固定宽度、100%高度的块状区域，并配置在父内容区域水平居中的位置。

首先，left样式50%代表了div标签的左框线会对齐父内容区域的垂直中线，然后margin-left样式为-150px，刚好是300px的一半，因为数值是负的，所以就会往左移动150px。综合这两个计算，就会刚好将div标签的垂直中线定义在父内容区域的垂直中线上。

5.垂直居中布局：这个布局将页面切割成一个固定高度、100%宽度的排列布局，并配置在父内容区域垂直居中的位置。

6.固定居中布局：这个布局将页面切割成一个固定高度、固定宽度的块状区域，并配置在父内容区域正中间的位置。