css盒模型与box-sizing

盒模型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