正在翻譯中。

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

概要

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
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

句法

/* 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 。內容框不能為負,並且進位到 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 | 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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
box-sizingChrome Full support 10
Notes
Full support 10
Notes
Notes box-sizing is not respected when the height is calculated from window.getComputedStyle().
Full support 1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12
Full support 12
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Full support 29
Full support 29
Full support 1
Prefixed Notes
Prefixed Implemented with the vendor prefix: -moz-
Notes Before Firefox 23, box-sizing is not respected when the height is calculated from window.getComputedStyle().
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Full support 8
Notes
Full support 8
Notes
Notes box-sizing is not respected when the height is calculated from window.getComputedStyle().
Opera Full support 7Safari Full support 5.1
Full support 5.1
No support 3 — ?
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support 4
Notes
Full support 4
Notes
Notes box-sizing is not respected when the height is calculated from window.getComputedStyle().
Full support 2
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android ? Edge Mobile Full support Yes
Full support Yes
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Android Full support 29
Full support 29
Full support 4
Prefixed Notes
Prefixed Implemented with the vendor prefix: -moz-
Notes Before Firefox 23, box-sizing is not respected when the height is calculated from window.getComputedStyle().
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
padding-box
DeprecatedNon-standard
Chrome No support NoEdge No support NoFirefox No support 1 — 50IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android ? Edge Mobile No support NoFirefox Android No support 4 — 50Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

See also

文件標籤與貢獻者

此頁面的貢獻者: mdnwebdocs-bot, SJW, PJCHENder, iigmir, fscholz, jwhitlock, YuCheng
最近更新: mdnwebdocs-bot,