box-sizing

box-sizing

  content-box:padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和,即 ( Element width = width + border + padding )此属性表现为标准模式下的盒模型。

  border-box:padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值,即使定义有border和padding也不会改变对象的实际宽度,即 ( Element width = width )此属性表现为怪异模式下的盒模型。

参考:

1、http://www.w3chtml.com/css3/properties/user-interface/box-sizing.html

2、http://www.cnblogs.com/zhaoran/archive/2013/05/24/3097482.html

原文地址:https://www.cnblogs.com/tekkaman/p/7007287.html