# CSS3 box-sizing 屬性 ## 實例 規定兩個并排的帶邊框的框： ``` div { box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ width:50%; float:left; } ``` 頁面底部有更多實例。 ## 瀏覽器支持 | IE | Firefox | Chrome | Safari | Opera | | --- | --- | --- | --- | --- | Internet Explorer、Opera 以及 Chrome 支持 box-sizing 屬性。 Firefox 支持替代的 -moz-box-sizing 屬性。 ## 定義和用法 box-sizing 屬性允許您以特定的方式定義匹配某個區域的特定元素。 例如，假如您需要并排放置兩個帶邊框的框，可通過將 box-sizing 設置為 "border-box"。這可令瀏覽器呈現出帶有指定寬度和高度的框，并把邊框和內邊距放入框中。 | 默認值： | content-box | | --- | --- | | 繼承性： | no | | --- | --- | | 版本： | CSS3 | | --- | --- | | JavaScript 語法： | _object_.style.boxSizing="border-box" | | --- | --- | ## 語法 ``` box-sizing: content-box|border-box|inherit; ``` | 值 | 描述 | | --- | --- | | content-box | 這是由 CSS2.1 規定的寬度高度行為。 寬度和高度分別應用到元素的內容框。 在寬度和高度之外繪制元素的內邊距和邊框。 | | border-box | 為元素設定的寬度和高度決定了元素的邊框盒。 就是說，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制。 通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。 | | inherit | 規定應從父元素繼承 box-sizing 屬性的值。 | ## 相關頁面 CSS3 教程：[CSS3 用戶界面](/css3/css3_user_interface.asp "CSS3 用戶界面")