CSS 规定的定位机制有三种，分别是标准文档流、浮动及绝对定位。
标准文档流：从上到下，从左到右，输出文档内容。
由块级元素和行级元素组成
（块级元素）：从左到右撑满页面，独占一行，触碰到页面边缘时，会自动换行。（div、ul、li、dl、dt、p...都是块级元素）
（行级元素）：能在同一行内显示，不会改变HTML文档结构。（span、strong、img、input...都是行级元素）
块级元素和行级元素都是盒子模型
盒子模型
盒子模型=网页布局的基石，由4部分组成：
边框（border）
外边距(margin)
内边距(padding)
盒子中的内容(content)
设置属性值有两种方式
分量设置：top,right,bottom,left(顺时针从上开始进行设置)
简写设置：3个值（top,left|right,bottom）2个值(top|bottom,left|right)1个值（代表4个属性值相同）
盒子模型排列顺序
border
content+padding
background-image
background-color
margin
自动居中一列布局
需要掌握（标准文档流、块级元素、margin属性）
浮动布局
需要掌握（float属性）
float：left、right、none
特点：元素会左移，或右移，直至触碰到容器为止
设置float的元素会影响其后面的元素，如果不想排版错乱，需要清除受影响的元素 clear:both; 或者 width:100%;overflow:hidden;(适用于父容器缩成一点的情况)
横向两列布局
网页布局最常见的方式之一
float属性-使纵向排列的块级元素，横向排列
margin属性-设置两列之间的间距
绝对定位
拥有3种定位形式：1.静态定位 2.相对定位 3.绝对定位
可设置4个属性值：
static(静态定位)
relative（相对定位）
absolute(绝对定位)
fixed（固定定位）
常用代码：
边框 border:4px solid #badbbd;
图片背景 background:url(images/t_book.gif) no-repeat;