元素的组成部分
想要知道CSS的盒模型就需要先知道HTML元素是哪几部分构成的。 打开浏览器的调试工具任意选择一元素，都可以看到元素由上图几部分构成。即margin、border、padding、content。CSS的盒模型就是关于这几部分的计算方式。
两种盒模型
CSS的盒模型分为content-box、border-box。
由box-sizing属性指定，即编写样式box-sizing:content-box;或者box-sizing:border-box;就可指定元素属于哪种盒模型。
浏览器默认给所有元素都是content-box这种盒模型。
content-box
content-box翻译为内容盒子。顾名思义，content-box盒子的边界是content。CSS设置width就是设置content的宽度，与padding、border、margin都无关。写成公式：width == content。
border-box
border-box翻译为边框盒子。顾名思义，border-box盒子的边界是border。CSS设置width是把border、padding、content一同计算。写成公式：width == border + padding + content。content的宽度自动计算，即content == width - border - padding。
哪个更好用？
浏览器默认给元素都是设置成content-box;但是并不好用。
现实世界中，人们说一个盒子多大，通常指的是包含盒子本身有多大，而不是单单指盒子里面装的东西有多大。
那么在电脑前，人们也继承了这种感觉。假如content-box指定width:100px，然而加上border、padding实际看到的大小比100px大，那么想要一个包含border、padding、content的盒子是100px大小，就往往需要手动计算减去padding、border得到的值再给width属性赋值。
把元素设置成border-box后，设置width直接指定了包含border、padding、content的盒子大小，更符合我们现实世界的直观感觉，也有利于我们布局。所以CSS reset的时候通常会把所有元素设置成border-box。
注
上文只提到了width，实际上height也是一样的。
