css布局

　　在css布局方式中，div 是这种布局方式的核心对象，我们的页面排版不再依赖于表格，仅从div的使用上说，做一个简单的布局只需要两样东西：div 与 css。因此我们称这种
布局方式为 div + css 布局。
例：

<div id="header">页面头部</div>
<div id="content">
    <div id="left"></div>
    <div id="right"></div>
</div>
<div id="footer">页脚</div>

　　了解布局，首先要知道文档流。文档流其实就是指浏览器生成页面的顺序。它是浏览器解析网页的一个重要概念，对于一个XHTML网页，body 元素下的任意元素，
根据其前后顺序，组成了一个个上下关系，这便是文档流。浏览器根据这些元素的顺序去显示它们在网页中的位置。文档流是浏览器的默认显示规则。

　　下面来讲解一下布局的基础

　　　　1.display(元素显示模式)，用于设置元素的显示方式。其语法如下：　　

　　　　display : block | none | inline | inline-block 

 　　其中，block：块对象指的是元素显示为一个方块，默认显示状态下将占据整行，其它的元素只能另起一行显示。inline： 行间对象与block刚好相反，它允许其它元素在同一行显示。none ： 隐藏对象 。

　　例：

div{display:block}/*块级元素显示*/

 　　2.float（元素的浮动），用来控制元素是否浮动显示。其语法如下：

float : none | left | right 

 　　其中，left：向左浮动，right：向右浮动，none：不浮动。要注意的是浮动的时候元素的显示属性也变化了 变为 “行内元素”。例：

div{float:left;}

　　 浮动的目的就是要打破文档流的默认显示规则。如果要让元素按照我们的布局要求进行显示。这时就要利用float属性。
　　 在浮动时，浮动元素具有以下特性：
　　1.任何申明为 float 的元素自动被设置为一个“块级元素”。
　　2.在标准浏览器中 浮动元素脱离了文档流 ，所以浮动元素后的元素会占据浮动元素本来应该所处的位置。
　　3.如果水平方向上没有足够的空间容纳浮动元素，则转向下一行 。
　　4.文字内容会围绕在浮动元素周围 。
　　5.浮动元素只能浮动至左侧或者右侧 。

　　使用浮动后，一定程度上会影响其它元素的布局，这时，我们便要使用清除浮动了。

　　3.清除浮动clear，其语法为：

　　clear : none | left | right | both

　　其中，none :默认值，允许两边都可以有浮动对象，left :不允许左边有浮动对象，right: 不允许右边有浮动对象，both :不允许有浮动对象。

　　除了上述特性外，元素的定位也在布局中至关重要。
　　4.position(元素的定位），其语法为：

position : static | absolute | fixed | relative 

 　　其中，static : 无定位，默认值。absolute：绝对定位。relative ： 相对定位。fixed：固定定位。
　　 在使用了absolute之后，元素有下面这些值得注意的地方：

　　1.脱离文档流。
　　2.通过 top,bottom,left,right 定位。
　　3.如果父元素 position 为 static 时，将以body坐标原点进行定位。
　　4.如果父元素 position 为 relative  时，将以父元素进行定位。

例：

div { position:absolute; left:100px; top:100px;}

　　 使用了relative之后：
　　1.相对定位（相对自己原来的位置而言）
　　2.不脱离文档流
　　3.参考自身静态位置通过 top,bottom,left,right 定位。
例：

div { position: relative; left:100px; top:100px;}

 　　使用了fixed之后：
　　1.固定定位实际上只是绝对定位的特殊形式；固定定位的元素是相对于浏览器窗口而固定，
　　2.而不是相对于其包含元素；即使页面滚动了，它们仍然会处在浏览器窗口中跟原来完全一样的地方。
例：

div { position: fixed; right:0; bottom:0;}

 　　5.z-index(元素的层叠关系），其用法为：

z-index : auto | number

　　当元素发生重叠时，可以通过 z-index 属性，设置其层叠的先后顺序。较大 number 值的对象会覆盖在较小 number 值的对象之上。
例：

div { z-index:1}