盒模型

盒模型由content+padding(内容与边框之间的距离)+border+margin(边框与外部元素的距离)组成。

标准文档流中，两个盒子，分别有上下外边距，竖直方向的margin不叠加，只取较大的值作为margin(水平方向的margin是可以叠加的)。
margin这个属性，本质上描述的是兄弟和兄弟之间的距离； 最好不要用这个marign表达父子之间的距离。如果向设置父子之间的距离，我们最好使用父元素的padding。

盒模型分为 ： W3C标准盒子 、IE盒子
可以通过box-sizing的取值来切换盒模型，它的取值可以为content-box、border-box；默认属性是content-box。

W3C标准盒子（content-box）：又称内容盒子，是指块元素box-sizing属性为content-box的盒模型。一般在现代浏览器中使用的都是正常盒模型content-box。它所说的width一般只包含内容，不包含padding与margin，并且盒子的大小会以内容优先，自动扩展，子元素可以撑开父元素.
 盒子总宽度 = margin + border + padding + width

IE盒子（border-box）：又称怪异盒模型（边框盒子），是指块元素box-sizing属性为border-box的盒模型。一般在IE浏览器中默认为这种怪异盒模型，但是由于其自身的特殊性，手机页面中也有使用怪异盒模型。怪异盒模型中，父元素的盒模型确定，子元素无法撑开父元素的盒模型。
 在这种盒模型下，我们所说的元素的 width ，实际上包含了 content + padding + border
 盒子总宽 = margin + width