标准盒模型、怪异盒模型（box-sizing）

CSS中Box model是分为两种: W3C标准（标准盒模型） 和 IE标准盒子模型（怪异盒模型）。大多数浏览器采用W3C标准模型，而IE中则采用Microsoft自己的标准。

重要的一个属性是box-sizing:content-box || border-box || inherit（默认是content-box）

• box-sizing:content-box：采用标准盒模型
  Element width = width + border + padding + margin，padding、border、margin不被包含在定义的width和height之内，对象的实际宽度等于设置的width值和border、padding、margin之和，改变padding、border、margin值的话width会跟着变化。

• box-sizing:border-box：采用怪异盒模型
  Element width = width，padding、margin和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度。

使用box-sizing:border-box，无论如何改动 border 与 padding 的值，都不会导致 box 总尺寸发生变化，也就不会打乱页面整体布局。

 

转载于:https://www.cnblogs.com/lmjZone/p/8567895.html