css盒子模型由四部分组成：内容（content）、填充（padding）、边框（border）、边距（margin），其中css样式中定义的width属性是定义内容区域的宽度，正常情况下，设置了内容区域的宽度后，再设置盒子的填充、边框、边距值，盒子在页面中实际占据的页面尺寸的计算是：

　　　　水平方向上：：width+2*padding+2*border+2*border，

　　　　垂直方向上：：height+2*padding+2*border+2*border，

不过需要注意的是行内元素，在不改变它的表现行为时，它是不能设置垂直方向上的填充值与边距值。

　　边距（margin）

      边距描述的是盒子与盒子之间的距离，也就是在这个盒子的多远的距离可以放置另外一个盒子。　边距的设置中存在经典的问题：垂直外边距合并；常常出现在父元素与第一个子元素之间或者是垂直方向上的同级元素之间；表现为给元素设置上边距时，子元素与父元素之间却没有如预期那隔开距离，或者父元素与它的同级元素之间隔开距离，但是我们没有给父元素设置外边距。解决外边距合并的方法是：

　　1、浮动（float）

　　2、定位（position：absolute）

　　3、填充（padding），给父元素在垂直方向上设置填充，以隔开父级元素与子元素的边距；

　　4、边框（border），原理同上；

　　5、overflow：hidden；

其中，overflow:hidden 的作用并不止于解决垂直外边距合并，它还有清除浮动的作用；

　　填充（padding）

　　填充指的是在盒子的内部，距离盒子四周多远的距离之内才可以将盒子放进来，不过在内部的盒子可以通过改变自己的边距（margin）来修改自己与父元素盒子四周的距离而无视父元素内部填充的设置。元素设置了overflow:hidden,在它的填充区域内出现隐藏，而是超出边距则隐藏超出部分。

　　内容（content）

　　在css中设置的宽度与高度，是内容区域的宽高，但是有一个属性可以设置盒子的组成：

　box-sizing：border-box|content-box|inherit

其中border-box代表在css中设置的width与height属性中包括了边框与填充;

　　content-box表示在css中设置的width与height属性只是内容区域的宽度与高度；

　　inherit是继承父元素。

<div  class="wrapper">

　　<div  class="border-box" style="width:200px;box-sizing:border-box;"></div>     //在整个页面中所占的尺寸是200px

</div>

<div  class="wrapper">

　　<div  class="content-box"  style="width:200px;box-sizing:content-box;"></div>   //在整个页面中所占的尺寸计算为

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　水平方向上：：width+2*padding+2*border+2*border，

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　                垂直方向上：：height+2*padding+2*border+2*border，

</div>

<div  class="wrapper"   style="width:200px;">

　　<div  class="inherit"  style="box-sizing:inherit;"></div>                                          //继承父元素

</div>

css盒子模型、垂直外边距合并