这篇翻译不完整。请帮忙从英语翻译这篇文章

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

摘要

 box-sizing 属性用来改变默认的 CSS 盒模型 对元素宽高的计算方式。这个属性可以用于模拟那些非正确支持标准盒模型的浏览器的表现。

初始值content-box
适用元素all elements that accept width or height
是否是继承属性
适用媒体visual
计算值as specified
是否适用于 CSS 动画
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

content-box | border-box
/* 关键字值 */
box-sizing: content-box;
box-sizing: border-box;

/* 全局值 */
box-sizing: inherit;
box-sizing: initial;
box-sizing: unset;

content-box
默认值,标准盒模型。 widthheight 只包括内容的宽和高, 不包括边框(border),内边距(padding),外边距(margin)。注意: 内边距, 边框 & 外边距 都在这个盒子的外部。 比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在浏览器中的渲染的实际宽度将是370px;

尺寸计算公式:width = 内容的宽度,height = 内容的高度。宽度和高度都不包含内容的边框(border)和内边距(padding)。
border-box
 widthheight 包括内边距(padding)与边框(border),不包括外边距(margin)。这是IE 怪异模式(Quirks mode)使用的 盒模型 。注意:这个时候内边距和边框将会包括在盒子中。比如  .box {width: 350px; border: 10px solid black;} 浏览器渲染出的宽度将是350px. 如果计算后的最内部的内容宽度为负值,都会被计算成0,内容还在,所以不可能通过border-box来隐藏元素。

尺寸计算公式:width = border + padding + 内容的宽度,height = border + padding + 内容的高度。

正式的语法

content-box | border-box

 

例子

/* 支持 Firefox, Chrome, Safari, Opera, IE8+ 和老的Android浏览器 */

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

规范

Specification Status Comment
CSS Basic User Interface Module Level 3
box-sizing
Candidate Recommendation Initial definition

浏览器兼容性

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

8.0[1]

7.0 3.0 (522)-webkit
5.1[2]
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 2.1-webkit[1]
4.0
1.0 (1.0)-moz [1]
29.0 (29.0)
9.0 (Yes) (Yes)

[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] The vendor prefix -webkit was removed in 534.12.

See also

文档标签和贡献者

 最后编辑者: Fizco,