盒模型box model
不太严谨地讲，css实现布局，就是把一个个盒子按照设定好的位置排列放好。这些盒子，里面的内容物，就是一个html标签包裹起来的内容。那么，每个元素在网页这个“画布”上，有自己的坐标位置以及空间大小。
元素的空间大小，可以通过盒模型来理解。
想象一个放在矩形空间内的纸箱。
从上往下看，从墙壁（空间边缘）到纸箱外层，是margin，纸箱本身的厚度是border，纸箱内塞了抗震的缓冲物，然后最里面才是内容物（元素），纸箱内层到内容物之间距离，就是padding。
以上，就是box model。
margin和padding都有四个方向上的距离，包括top right bottom和left。指定margin和padding时，也依照从top开始，按顺时针的方向，即上右下左的顺序。
h1 {margin : 10px 0px 15px 5px;} 中，按照上右下左的指定顺序，就知道margin-top=10px；margin-right=0px；margin-left=5px；margin-bottom=15px。
box-sizing
既然有内容物、padding、border、margin，当我们说一个元素的宽高（width、height）时，到底是指哪些范围呢？
在W3C标准中，width和height指的是内容物的宽高，padding、border、margin都是在内容外、向外层绘制出来的。例如，当赋予一个元素width为350px时，如果设置{border：10px solid black;}，则在浏览器中，展示出来的空间大小为10+350+10=370px。
CSS3之前，盒模型都是按照上述的准则进行配置的。但是在CSS3中，新增了box-sizing属性，可以调整宽高的计量方式。
box-sizing的默认值为content-box，也就是W3C标准一直采用的宽高计量方法。
但是当设置{box-sizing: border-box;}时，则是将 “内容物+padding+border” 的宽高作为width和height。要计算内容物的宽高，则需要在width和height基础上，减去padding和border的大小。或者说，内容物是在padding、border基础上向内层绘制出来的。
总结
{box-sizing: content-box;}时：
width = width of the content
height = height of the content
{box-sizing: border-box;}时：
width = border + padding + width of the content
height = border + padding + height of the content
