CSS3 box-sizing 属性 怪异盒模型border-box

box-sizing属性有三种border-box，content-box，inherit，其中inherit是规定应从父元素继承 box-sizing 属性的值。所以说来其实只有两种。

content-box是正常盒模型，是指块元素box-sizing属性为content-box的盒模型，也是默认的属性。一般在现代浏览器中使用的都是正常盒模型content-box，它也是标准 w3c 盒子模型。在这种情况下，盒模型的大小包括content，padding，border，并且先做content。可能还有说margin，注意margin是外部距离，是盒子外部的，不包括在盒子内部，这个时候相当于一个元素的实际宽高是由padding + border + content  组成。

border-box是一种怪异盒模型。怪异盒模型是先做盒。然后添加border，padding，最后做content。即保证盒模型优先，先做盒再放内容，不管内容是否放得下，一般手机上用的更多。总结一句话就是：border-box的border和padding是在盒子的内部的，也就是说规定了盒子的大小，那么盒子不会因为设定了border和padding而被撑大，所以这种盒模型在响应式网站，尤其是手机端非常常见。

div {
  width: 100px;
  height: 50px;
  padding: 20px;
 border: 10px solid orange;
  background: pink;
}

 /**元素的总宽度 = 100 + 20*2 + 10*2; 总高度 = 50 + 20*2 + 10*2 ; */ 
.content-box { 
  box-sizing: content-box; 
}

 /** 元素的总宽度 = 100; 总高度 = 50px; */  
.border-box { 
  box-sizing: border-box;
}