CSS+DIV进行的页面布局

第一部分、布局概述1.网页布局2.页面元素定位机制第二部分、布局常用属性1.浮动属性（float）2.清除浮动（clear）3.定位属性（position）（1）相对定位（2）绝对定位

第一部分、布局概述

DIV+CSS布局：网页html通过DIV标签+CSS样式表代码开发制作的（html）网页的统称。

1.网页布局

目的：为了使页面结构清晰，易读，更有条理性。

步骤：

确定版心：网页的主体内容,在页面中水平居中显示分析页面中的模块：头部(header)、导航(nav)、焦点图(banner)、内容(content)、页面底部(footer)。控制页面中各个模块：通过盒子模型，使用DIV+CSS进行模块的控制。

2.页面元素定位机制

普通流方式：由元素在html文件中的位置决定(由标签在文件中的位置来决定)。浮动方式：元素在页面中可以左右移动,直到碰到包含框或其他浮动框绝对定位：直接将元素定位到页面的任何位置(设置元素在页面中的位置坐标)

第二部分、布局常用属性

1.浮动属性（float）

浮动：元素脱离原有的标准文档流,移动到其父元素中指定的位置浮动的实现：在元素的CSS中添加float属性

选择器{float：属性值;}

2.清除浮动（clear）

清除浮动的原因：浮动的元素离开了原有的文档流,它会对页面中其他元素的排版产生影响。为了消除这种影响，可以使用clear属性消除浮动。

选择器{float:属性值;}

3.定位属性（position）

浮动布局虽然灵活，但是却无法对元素的位置进行精确的控制。在CSS中，通过定位属性可以实现网页中元素的精确定位。

（1）相对定位

相对定位：元素以它所在的普通流中的位置为起始点进行定位(设置坐标)

position: relative;/*相对定位*/

（2）绝对定位

绝对定位：可以把元素精确定位到页面中的某个地方

position: absolute;/*绝对定位*/

元素绝对定位后，它与普通文档流就没有关系，不占据普通文档流的空间绝对定位的元素的位置是相对于最近的父元素而言的因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它的层级次序。z-index 的值越高，它显示的越在上层。页面中元素的z-index(层级)默认层级为0。