W3C标准盒模型
W3C标准盒模型在计算盒子宽高时，为width/height、padding、border四个属性相加。
实际也就是 content+padding+border，因为我们通过css设置width/height属性就是用来定义盒子内容宽高的。
content宽高100
IE盒模型
IE盒模型在计算盒子宽高时，只包含width/height即内容content部分。但值得注意的是，这content包含了padding、border两个属性。
也即是说，盒子最终的宽高，就是我们设置的width/height,若我们又设置了padding、border两个属性，则这两个属性不会对宽高造成影响，而是包含在了设置的width/height中。
content宽高60
box-sizing
上面两个例子已经让我们清晰的发现两种盒模型的差异，那我们怎么切换两种盒子模型呢，其实上文已经使用过了，也就是box-sizing属性。
语法
box-sizing: content-box|border-box|inherit;
-
content-box
- 默认值，设置为W3C标准盒模型
-
border-box
- 设置为IE盒模型
-
inherit
- 继承父级盒子类型
总结
W3C标准盒模型在计算盒子宽高时，为width/height、padding、border四个属性相加。IE盒模型在计算盒子宽高时，只包含width/height即内容content部分，且content包含了padding、border。margin并不会影响盒子的尺寸，该属性影响的是布局。- 可通过
box-sizing改变盒子类型。
