在CSS中有兩種盒模型：css

• IE盒模型的寬度是邊框+padding+內容寬度
• W3C盒模型的寬度就是內容寬度

box-sizing屬性能夠設置元素應用哪種盒模型。
瀏覽器兼容性：IE8及以上web

1、IE盒模型

box-sizing：border-box;

以上CSS代碼會使元素的盒模型爲IE盒模型。瀏覽器

width 與 height 包括內邊距（padding）與邊框（border），不包括外邊距（margin）。這是IE 怪異模式（Quirks mode）使用的 盒模型 。svg

這個時候內邊距和邊框將會包括在盒子中。ui

好比：spa

.box { width: 350px; border: 10px solid black; }

瀏覽器渲染出的寬度將是350px。若是計算後的最內部的內容寬度爲負值，都會被計算成0，內容還在，因此不可能經過border-box來隱藏元素。code

尺寸計算公式：xml

width = border + padding + 內容的寬度
height = border + padding + 內容的高度。

2、W3C盒模型

box-sizing：content-box;

以上CSS代碼會使元素的盒模型爲W3C盒模型（其實元素的默認盒模型是W3C盒模型）。scss

元素width 與 height 只包括內容的寬和高， 不包括邊框（border），內邊距（padding），外邊距（margin）。it

注意: 內邊距, 邊框 & 外邊距 都在這個盒子的外部。

好比

.box { width: 350px； border: 10px solid black; };

那麼在瀏覽器中的渲染的實際寬度將是370px。

尺寸計算公式：

width = 內容的寬度
height = 內容的高度

寬度和高度都不包含內容的邊框（border）和內邊距（padding）。