box-sizing

翻譯不完整。請協助 翻譯此英文文件

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

概要

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.
Candidate Recommendation Initial definition

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 -webkit[1]
10.0
(Yes)-webkit
(Yes)

1.0 (1.7 or earlier)-moz[1]
29.0 (29.0)[2]

8.0[1]

7.0 3.0 (522)-webkit
5.1[3]
padding-box No support No support 1.0 (1.7 or earlier)-moz[1]
29.0 (29.0)
Removed in 50.0 (50.0)
No support No support No support
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 2.1-webkit[1]
4.0
(Yes)-webkit
(Yes)
1.0 (1.0)-moz[1]
29.0 (29.0)[2]
9.0 (Yes) (Yes)
padding-box No support No support 1.0 (1.0)-moz[1]
29.0 (29.0)
Removed in 50.0 (50.0)
No support No support No support

[1] box-sizing is not respected when the height is calculated from window.getComputedStyle(), in Internet Explorer (all versions), in Firefox prior to 23, and in Chrome. Edge doesn't exhibit the problem. Note that IE9's proprietary currentStyle property does return the correct value of height.

[2] In addition to the unprefixed support, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.

[3] The vendor prefix -webkit was removed in 534.12.

See also

文件標籤與貢獻者

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