CSS3新增了盒模型box-sizing，属性值有下面三个：

content-box 默认值，让元素维持W3C的标准盒模型。元素的宽度/高度（width/height）= 元素内容框宽度/高度（content width/height），即：Element width/height = content width/height；
在宽度和高度之外绘制元素的内边距和边框
border-box

让元素维持IE6即以下版本盒模型。元素的宽度/高度（width/height）= 元素边框宽度（border）+ 内边距（padding）+ 元素内容框宽度/高度（content width/height），即： 

Element width/height = border + padding + content width/height；
为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制；
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit 规定应该从父元素继承box-sizing的属性。

 

 

 

 

 

 

兼容性：IE8+及其他主流浏览器均支持box-sizing。其中IE6及以下默认是以类似border-box盒模型来计算尺寸。

 

版权声明：本文为lhleej原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/lhleej/p/10089618.html