默認情況下，網頁中元素的實際寬度或高度取決于元素內容區的寬度或高度、內邊距以及邊框屬性的大小，因此我們在為元素布局時還需要考慮元素的內邊距和邊框屬性所占的頁面空間，這一點我們已經在《CSS盒子模型》中進行了講解。
正是由于上述原因，當您為頁面元素設置寬度和高度時，元素的實際大小往往比您設置的要大。為此 CSS3 中添加了 box- 屬性來改變默認的盒子模型，通過 box- 屬性可以將元素的內邊距和外邊距在元素內容區內繪制，以使元素呈現的寬度和高度與設置的寬度和高度相同。
box- 屬性的可選值如下：
值描述
-box
默認值，元素的實際寬度或高度等于元素內容區的寬度或高度、內邊距和邊框的和
-box
在元素的內容區內繪制內邊距或邊框，內邊距或邊框不會影響元素的實際寬度或高度
從父元素繼承 box- 屬性的值。
【示例】下面通過一個示例來演示 box- 屬性的使用：
默認情況box-sizing: content-box;box-sizing: border-box;
運行結果如下圖所示：
圖：box- 屬性演示
提示：當為元素定義 box-: -box; 屬性時css盒子中內容邊框屬性css盒子中內容邊框屬性，元素內容區的實際寬度和高度是 width 和 屬性中減去各邊的邊框和內邊距的寬度。
