CSS box-sizing 屬性

定義和用法

box-sizing 屬性允許您以特定的方式定義匹配某個區域的特定元素。

例如，假如您需要并排放置兩個帶邊框的框，可通過將 box-sizing 設置為 "border-box"。這可令瀏覽器呈現出帶有指定寬度和高度的框，并把邊框和內邊距放入框中。

另請參閱：

CSS3 教程：CSS3 用戶界面

HTML DOM 參考手冊：boxSizing 屬性

實例

規定兩個并排的帶邊框的框：

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}

親自試一試

頁面底部有更多實例。

CSS 語法

box-sizing: content-box|border-box|inherit;

屬性值

值 描述
content-box

這是由 CSS2.1 規定的寬度高度行為。

寬度和高度分別應用到元素的內容框。

在寬度和高度之外繪制元素的內邊距和邊框。
border-box

為元素設定的寬度和高度決定了元素的邊框盒。

就是說，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制。

通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
inherit 規定應從父元素繼承 box-sizing 屬性的值。

技術細節

默認值： content-box
繼承性： no
版本： CSS3
JavaScript 語法： object.style.boxSizing="border-box"

瀏覽器支持

表格中的數字注明了完全支持該屬性的首個瀏覽器版本。

帶 -webkit- 或 -moz- 的數字表示使用前綴的首個版本。

Chrome IE / Edge Firefox Safari Opera
10.0
4.0 -webkit-		 8.0 29.0
2.0 -moz-		 5.1
3.2 -webkit-		 9.5