box-sizing

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

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

摘要

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

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

语法

正规语法: content-box | padding-box | border-box
box-sizing: content-box
box-sizing: padding-box
box-sizing: border-box

box-sizing: inherit

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

正式的语法

content-box | padding-box | border-box

 

例子

/* support Firefox, WebKit, Opera and IE8+ */

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

规范

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

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0-webkit
9.0

1.0 (1.0)-moz
[1]

29.0 (29.0)

8.0

7.0 3.0 (522)-webkit
5.1 (534.12)
padding-box 未实现 1.0 (1.0) ? 未实现 ?
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support (Yes) 1.0 (1.0)-moz [1] Mango 7.5 (Yes) (Yes)
padding-box ? 1.0 (1.0) ? ? ?

附注

[1] 这个处于实验中的属性 box-sizing 还有一些bug (bug 243412). 他们正在一点一点的被修复:

  • Until Gecko 16.0 (Firefox 16) -moz-box-sizing didn't apply to table cells (bug 338554);
  • Until Gecko 17.0 (Firefox 17), the min-height/max-height CSS properties don't work with -moz-box-sizing: border-box (bug 308801)

由window.getComputedStyle 获取height时不会考虑box-sizing, 至少 Firefox 18 (bug 520992) 与 Internet Explorer 9 是这样,  不过Chrome 24 不是(其它浏览器未测试). 注意 IE9 currentStyle 不能返回正确的height值。

See also

文档标签和贡献者

向此页面作出贡献: wy-ei, guoyunhebrave, teoli, yan, damon
最后编辑者: wy-ei,