box-sizing

Experimental

這是一個實驗中的功能
此功能在某些瀏覽器尚在開發中,請參考兼容表格以得到不同瀏覽器用的前輟。

概要

The box-sizing property is used to alter the default CSS box model 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 盒子模型 中所計算的寬度和高度。可以使用此屬性來模擬不正確支持CSS盒子模型規範的瀏覽器的行為。

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

句法

/* 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 所使用的盒模型。注意,內邊距和邊框都將在盒子內 ,例如,.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

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

Examples

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

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

Specifications

Specification Status Comment
CSS Basic User Interface Module Level 3
The definition of 'box-sizing' in that specification.
Recommendation Initial definition

Browser compatibility

BCD tables only load in the browser

See also