每个元素都有盒模型，由内容、padding、border、margin组成。
3D盒子模型：从上至下
border
content+padding
background-image
background-color
margin
css2.1中的outline属性，与border不同，轮廓绘制在元素框上，所以不会影响元素大小或定位。现代浏览器&IE8以上支持。
Ie和盒模型：
盒模型：width指content
非盒模型：width = content + padding + border (ie6使用非标准盒模型)
？目前最好的办法就是回避，不要给元素添加具有指定宽度的内边距，而尝试将内边距或外边距添加到元素的父元素和或子元素
外边距叠加
普通文档流中块级元素垂直外边距才会发生外边距叠加
content content
margin-bottom:30px
margin-top:20px ------> margin-bottom:30px
content content
margin-top:30px margin-top:30px
margin-top:20px ------>
content content
margin-top:20px
margin-bottom:20px --------> margin-bottom:20px
margin-top:20px
margin-top:20px
margin-bottom:20px ---------> margin-top:20px
行内元素：
一行内显示
不能设置宽、高(可以通过设置行高来修改height,修改水平的border、padding、margin修改宽)
设置垂直的padding margin不会改变height
块级元素
站一行
垂直显示
可以设置宽高
css2.1允许inline-block（ie8,ff3.0以上等都支持）
<div>
匿名块框
<p>...</p>
<div>
匿名块框无法直接应用样式，但这有利于我们理解屏幕上所有东西都形成了某种框。
相对定位
相对于自己之前的位置，仍在文档流中，会覆盖其他框
position:relative;
left:20px;
top:20px;
绝对定位(ie6/5.5有个bug，需要设置祖先的尺寸)
相对最近的有定位属性的祖先
不在文档流中，不占据空间(display:none也不占用空间)
z-index越大，框在栈的位置越高
绝对定位的元素已经脱离了文档，不会影响普通流中的框，扩大绝对定位的框，周围的框不会重新定位，谨记
固定定位
ie6以下不支持，ie7部分支持
浮动
浮动的框可以左右移动，知道碰到包含框或另一个浮动框边缘。因为浮动框不存在普通流中，所以普通流中的块框表现得就像浮动框不存在。
1
2
3
2 1(1右浮动)
3
1（1覆盖了2）
3
clear清除浮动就是就是给元素加足够的外边距，使元素的顶边缘垂直下降到浮动框下面
<div>
<img src="" alt="" style="float:left;"/>
<p style="clear:both;">...</p>
</div>
<div> <!--容器不包围他们-->
<img src="" alt="" style="float:left;"/>
<p style="float:right;">...</p>
</div>
解决办法
1. p元素加<br style="clear:both;"/>
2. div也浮动
3. overflow:hidden
4. .clear:after{content:'.';display:block;clear:both;}
