box-sizing

實驗性質: 這是一個實驗中的功能 (en-US)
此功能在某些瀏覽器尚在開發中，請參考兼容表格以得到不同瀏覽器用的前輟。

The box-sizing property is used to alter the default CSS box model (en-US) used to calculate width and height of the elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.

box-sizing 屬性用於更改預設 CSS 盒子模型 (en-US)中所計算的寬度和高度。可以使用此屬性來模擬不正確支持 CSS 盒子模型規範的瀏覽器的行為。

預設值 (en-US)content-box
Applies toall elements that accept width or height
繼承與否no
Computed value (en-US)as specified
Animation type (en-US)discrete

句法

css
/* Keyword values */
box-sizing: content-box;
box-sizing: border-box;

/* Global values */
box-sizing: inherit;
box-sizing: initial;
box-sizing: unset;

值

  • content-box
    • : 這是根據 CSS 標準的起始值和預設值。 width 與 height 只包括內容本身的寬和高， 不包括邊框（border）、內邊距（padding）、外邊距（margin）。注意：內邊距、邊框和外邊距都在這個盒子的外部。例如，如果 .box {width: 350px}; 而且 {border: 10px solid black;}，那麼在瀏覽器中的渲染該容器的實際寬度將是 370px，簡單來說，尺寸計算公式：width = 內容的寬度，height = 內容的高度。寬度和高度都不包含內容的邊框（border）和內邊距（padding）。
  • border-box
    • : width 和 height 屬性包括內容（content），內邊距（padding）和邊框（border），但不包括外邊距（margin）。這是當文檔處於 Quirks 模式時 Internet Explorer 所使用的盒模型 (en-US)。注意，內邊距和邊框都將在盒子內 ，例如，.box {width: 350px; border: 10px solid black;}，渲染出的容器寬度會固定在 350px，而內容（content）的寬度就會變成 330px，因為邊框（border）佔了 20px。內容框不能為負，並且進位到 0，使得不可能使用 border-box 使元素消失。
    這裡的維度計算為： width = border + padding + 內容的 width， height = border + padding + 內容的 height。
  • padding-box
    • : The width and height properties include the content, the padding but neither the border, nor the margin. Only Firefox implemented this value, and it was removed in Firefox 50.

Formal syntax

box-sizing = 
  content-box  | (en-US)
  border-box

Examples

css
/* support Firefox, Chrome, Safari, Opera, IE8+ and old Android */

.example {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Specifications

Specification
CSS Box Sizing Module Level 3
# box-sizing

Browser compatibility

BCD tables only load in the browser

See also