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 to | all elements that accept width or height |
繼承與否 | no |
Computed value | as specified |
Animation type | 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
-
border-box
這裡的維度計算為: width = border + padding + 內容的 width, height = border + padding + 內容的 height。 padding-box
非標準 已棄用
Formal syntax
box-sizing =
content-box |
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