参考地址：http://www.imooc.com/learn/680
标准盒模型
元素尺寸
-
可视尺寸-clientWidth（标准）——就是上图中的border box包含的尺寸。
-
占据尺寸-outerWidth（YY，jQuery里面是有这个方法的）——就是上图中的margin box包含的尺寸
一、margin与可视区域
1、适用于没有设定width/height的普通block水平元素，（float元素，absolute/fixed元素，inline元素，table-ceil元素，这些都不行）
2、只适用于水平元素尺寸
代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div { 8 overflow: hidden; 9 background: #000; 10 } 11 p { 12 height: 200px; 13 margin: 50px 50px; 14 background: #4794ea; 15 } 16 </style> 17 </head> 18 <body> 19 <div> 20 <p>通过改变p元素的margin-[left|right]值，即可看到p元素水平方向的可视尺寸的改变；通过改变p元素的margin-[top|bottom]，p元素垂直方向上的可视尺寸丝毫不会变化，改变的是p元素在垂直方向上的占据尺寸。<br />可以借助Chrome dev面板的来观测：一边改变p元素的margin值，一边观测面板中的盒子模型数值就能够明白了。</p> 21 </div> 22 </body> 23 </html>
注意，上面代码改变的是中间蓝色的部分
原理：没有设置宽高的普通块属性，元素的宽（content）可以是任意值（可以缩成一点），即可以随着文字伸缩，也可以由于margin值水平伸缩，即margin值改变影响的是宽（content）尺寸，对padding值没有影响，可以设置background-clip:content-box验证；而height高由于先受文本内容的自适应影响，所以改变margin就只是改变margin值而已。
为什么设置了float和绝对定位后尺寸就不受margin的影响呢，因为设置这两个任意属性后，元素就成了inline-block，宽度尺寸仅随着文本的变化而变化。这就解释了inline也是如此。
实际应用：
1、一侧定宽的自适应布局
二、margin与占据尺寸(元素所占据的空间)
1、block与inlne-block水平元素均适用
2、与有没有设定width/height值无关
3、适用于水平方向和垂直方向
实际应用：
1、实现滚动区域上下留白的效果
代码：
1 <div style="height: 100px;background-color: #1AA094;overflow:auto;padding: 50px 0"> 2 <img height="200" src="../img/1.jpg"> 3 </div> 4 5 6 <div style="height: 100px;background-color: #1AA094;overflow:auto;"> 7 <img height="200" style="margin: 50px 0" src="../img/1.jpg"> 8 </div>
第一个，火狐浏览器里面，底部没有留白。第二个，正常
二、margin与百分比单位
普通元素的百分比margin都是相对于容器的宽度计算的
代码：
1 <div style="background-color: #1AA094; 200px;height: 300px"> 2 <img style="margin: 10%" src="../img/1.jpg"> 3 </div>
绝对定位元素的百分比margin
代码：
1 <div style="background-color: #1AA094; 200px;height: 300px;position: relative"> 2 <img style="margin: 10%;position: absolute" src="../img/1.jpg"> 3 </div>
三、margin重叠
1、相邻兄弟元素margin重叠
这三个效果是一样的
2、空block元素margin重叠
重叠规则计算：
1、正正取最大值
2、正负值相加
3、负负最负值
实例之一：
