Style boxSizing 屬性

定義和用法

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

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

另請參閱：

CSS 參考手冊：box-sizing 屬性

實例

更改 boxSizing 屬性：

document.getElementById("myDIV").style.boxSizing = "border-box";

親自試一試

語法

返回 boxSizing 屬性：

object.style.boxSizing

設置 boxSizing 屬性：

object.style.boxSizing = "content-box|border-box|initial|inherit"

屬性值

值 描述
content-box

默認值。這是 CSS2.1 規定的寬度和高度的行為。

規定的寬度和高度（以及 min/max 屬性）分別應用于元素內容框的寬度和高度。

元素的內邊距和邊框在規定的寬度和高度之外進行布局和繪制
border-box

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

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

通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
initial 將此屬性設置為其默認值。請參閱 initial。
inherit 從其父元素繼承此屬性。請參閱 inherit。

技術細節

默認值： content-box
返回值： 字符串，表示元素的 box-sizing 屬性。
CSS 版本： CSS3

瀏覽器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持