box-sizing（CSS3）

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盒模型来计算尺寸。