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盒模型來計算尺寸。