这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
摘要
box-sizing
属性用来改变默认的 CSS 盒模型 对元素宽高的计算方式。这个属性可以用于模拟那些非正确支持标准盒模型的浏览器的表现。
初始值 | content-box |
---|---|
适用元素 | all elements that accept width or height |
是否是继承属性 | 否 |
适用媒体 | visual |
计算值 | as specified |
Animation type | discrete |
正规顺序 | 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
- 默认值,标准盒模型。
width
与height
只包括内容的宽和高, 不包括边框(border),内边距(padding),外边距(margin)。注意: 内边距, 边框 & 外边距 都在这个盒子的外部。 比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在浏览器中的渲染的实际宽度将是370px;
尺寸计算公式:width = 内容的宽度,height = 内容的高度。宽度和高度都不包含内容的边框(border)和内边距(padding)。 border-box
-
width
与height
包括内边距(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 |
浏览器兼容性
[1] 如果在 Internet Explorer (所有版本),Firefox(版本 23 之前),Chrome 使用 window.getComputedStyle()
取值,box-sizing 并不适用。Edge 不会出现该问题,并且 IE 9 的属性 currentStyle
不能返回正确的高度值。
[2] 浏览器厂商已移除 -webkit 前缀,
534.12.
相关链接
文档标签和贡献者
标签:
此页面的贡献者:
2power10,
Cattla,
Fizco,
feeldesignstudio.com,
Sebastianz,
wy-ei,
guoyunhebrave,
teoli,
yan,
damon
最后编辑者:
2power10,