沒有被普遍採用的box-sizing屬性

在標準盒模型下設置的width和height只是內容的寬和高，但在設置了寬和高的狀況下若還要設置border、margin、padding等時，會發生溢出的現象，所以須要將盒模型更改。

 

box-sizing 屬性用來改變默認的 CSS 盒模型對元素寬高的計算方式。這個屬性能夠用於模擬那些非正確支持標準盒模型的瀏覽器的表現。

一、值

• content-box

　　默認值，標準盒模型。 width 與 height 只包括內容的寬和高， 不包括邊框（border），內邊距（padding），外邊距（margin）。注意: 內邊距, 邊框 & 外邊距 都在這個盒子的外部。 好比. 若是 .box {width: 350px}; 並且 {border: 10px solid black;} 那麼在瀏覽器中的渲染的實際寬度將是370px;

　　尺寸計算公式：width = 內容的寬度，height = 內容的高度。寬度和高度都不包含內容的邊框（border）和內邊距（padding）。

• border-box （其實box-sizing:border-box就是採用怪異模式下的盒模型來計算寬和高的）。

　　width 與 height 包括內邊距（padding）與邊框（border），不包括外邊距（margin）。這是IE 怪異模式（Quirks mode）使用的 盒模型 。注意：這個時候外邊距和邊框將會包括在盒子中。好比  .box {width: 350px; border: 10px solid black;} 瀏覽器渲染出的寬度將是350px. 若是計算後的最內部的內容寬度爲負值，都會被計算成0，內容還在，因此不可能經過border-box來隱藏元素。

　　尺寸計算公式：width = border + padding + 內容的寬度，height = border + padding + 內容的高度。

二、瀏覽器支持狀況

　　支持目前的全部Firefox, Chrome, Safari, Opera版本的瀏覽器以及 IE8+以上的IE瀏覽器