CSS：盒子模型和box-sizing属性-前端不看后悔系列

盒子模型（分2个而已嘛）：IE盒子模型和W3C盒子模型
相关box-sizing的属性。
box-sizing: border-box;
width = content+padding+border (横向相关)

box-sizing: content-box;
width = content (横向相关)

这两个模型的唯一区别是计算width和height时，IE盒子模型包含padding和border, W3C盒子模型则不包括。

放个测试demo，没效果来砍我
html：

<div class="box">111</div>

css:

.box {
  box-sizing: border-box;
  /*box-sizing: content-box;*/ /*切换看看就知道2个的区别*/
  height: 30px;
  width: 70px;
  margin: 10px;
  padding: 5px;
  background-color: yellowgreen;
}

为了使页面在不同浏览器下呈现相同的效果，必须统一盒子模型，因为设置width或者height一般是必须用到的。

那么必须设置浏览器的渲染模式是标准模式，在标准模式下，IE6+和其他现代浏览器会以W3C盒子模型渲染。（在怪异模式下，IE中只有IE9+会用W3C盒子模型。

常用下语句规范整个页面的盒子

*{box-sizing:border-box;}