box-sizing

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

box-sizing CSS 屬性設定如何計算元素的總寬度與高度。

嘗試一下

CSS 盒模型中,預設情況下,你為元素指定的 widthheight 只應用於元素的內容區域。如果元素有邊框或內邊距,這些會加到 widthheight 上,從而得出畫面上呈現的盒子大小。這意味著當你設定 widthheight 時,必須調整你給的值以考慮邊框或內邊距。例如,如果你有四個設為 width: 25%; 的盒子,若其中任何一個有左右內邊距或左右邊框,預設情況下它們將無法在父容器的限制內排成一行。

box-sizing 屬性可用來調整此行為:

  • content-box 是預設的 CSS 盒模型行為。如果你將元素的寬度設定為 100 像素,則元素的內容框將是 100 像素寬,任何邊框或內邊距的寬度將加到最終的呈現寬度上,使元素寬度超過 100 像素。

  • border-box 告訴瀏覽器將任何邊框和內邊距計算在元素的寬度和高度內。如果你將元素的寬度設定為 100 像素,則這 100 像素將包括任何添加的邊框或內邊距,內容框會縮小以吸收這些額外的寬度。這通常使元素的尺寸調整變得更加容易。

    box-sizing: border-box 是瀏覽器對 <table><select><button> 元素,以及對 radiocheckboxresetbuttonsubmitcolorsearch 類型的 <input> 元素所使用的預設樣式。

备注:box-sizing 設為 border-box 通常對元素佈局非常有用。這可以讓元素尺寸處理更容易,並消除許多在佈局內容時可能遇到的問題。然而,當使用 position: relativeposition: absolute 時,使用 box-sizing: content-box 可以使定位值與內容相關,並獨立於邊框和內邊距尺寸的變化,這在某些情況下可能是理想的。

語法

css
box-sizing: border-box;
box-sizing: content-box;

/* 全域值 */
box-sizing: inherit;
box-sizing: initial;
box-sizing: revert;
box-sizing: revert-layer;
box-sizing: unset;

box-sizing 屬性是從以下值列表中選擇的單一關鍵字。

content-box

這是 CSS 標準指定的初始值和預設值。widthheight 屬性包含內容,但不包括內邊距、邊框或外邊距。例如,.box {width: 350px; border: 10px solid black;} 會呈現寬度為 370px 的盒子。

此時,元素的尺寸計算為:寬度 = 內容的寬度高度 = 內容的高度。(邊框和內邊距不包括在計算中。)

border-box

widthheight 屬性包含內容、內邊距和邊框,但不包括外邊距。請注意,內邊距和邊框會在盒子內。例如,.box {width: 350px; border: 10px solid black;} 會呈現寬度為 350px 的盒子,其中內容區域的寬度為 330px。內容框的寬度不能為負數,最小值為 0,因此無法使用 border-box 使元素消失。

此時,元素的尺寸計算為:寬度 = 邊框 + 內邊距 + 內容的寬度高度 = 邊框 + 內邊距 + 內容的高度

形式定義

預設值content-box
Applies toall elements that accept width or height
繼承與否no
Computed valueas specified
Animation typediscrete

形式語法

box-sizing = 
content-box |
border-box

範例

使用 content-box 和 border-box 的盒子尺寸

此範例展示了不同的 box-sizing 值如何改變兩個其他條件相同的元素的呈現尺寸。

HTML

html
<div class="content-box">Content box</div>
<br />
<div class="border-box">Border box</div>

CSS

css
div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.content-box {
  box-sizing: content-box;
  /* 總寬度: 160px + (2 * 20px) + (2 * 8px) = 216px
     總高度: 80px + (2 * 20px) + (2 * 8px) = 136px
     內容框寬度: 160px
     內容框高度: 80px */
}

.border-box {
  box-sizing: border-box;
  /* 總寬度: 160px
     總高度: 80px
     內容框寬度: 160px - (2 * 20px) - (2 * 8px) = 104px
     內容框高度: 80px - (2 * 20px) - (2 * 8px) = 24px */
}

結果

must be a string

規範

Specification
CSS Box Sizing Module Level 3
# box-sizing

瀏覽器相容性

BCD tables only load in the browser

參見