CSS+DIV进行的页面布局

第一部分、布局概述

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

1.网页布局

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

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

2.页面元素定位机制

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

第二部分、布局常用属性

1.浮动属性（float）

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

    选择器{
	    float：属性值;
    }

属性值	描述
none	不浮动 （默认值）
left	向左浮动
right	向右浮动

2.清除浮动（clear）

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

    选择器{
        float:属性值;
    }

属性值	描述
left	清除左浮动的影响
right	清除右浮动的影响
both	清除左右两侧的影响

3.定位属性（position）

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

（1）相对定位

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

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

（2）绝对定位

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

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

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