box-sizing 属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行为。

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

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

在CSS中,你设置一个元素的 widthheight 只会应用到这个元素的内容区。如果这个元素有任何的 border 或 padding ,绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。当我们实现响应式布局时,这个特点尤其烦人。

box-sizing 属性可以被用来调整这些表现:

  • content-box  是默认值。如果你设置一个元素的宽为100px,那么这个元素的内容区会有100px宽,并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
  • border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说,如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding,内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。

一些专家甚至建议所有的Web开发者们将所有的元素的box-sizing都设为border-box

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

尺寸计算公式:width = 内容的宽度,height = 内容的高度。宽度和高度都不包含内容的边框(border)和内边距(padding)。
border-box
 widthheight 属性包括内容,内边距和边框,但不包括外边距。这是当文档处于 Quirks模式 时Internet Explorer使用的盒模型。注意,填充和边框将在盒子内 , 例如, .box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为350px的盒子。内容框不能为负,并且被分配到0,使得不可能使用border-box使元素消失。

这里的维度计算为:
width = border + padding + 内容的  width
height = border + padding + 内容的 height
padding-box 
width 和 height 属性包括内容和内边距,但是不包括边框和外边距。只有Firefox实现了这个值,它在Firefox 50中被删除。

正式的语法

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

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

 
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] 如果在 Internet Explorer (所有版本),Firefox(版本 23 之前),Chrome 使用 window.getComputedStyle() 取值,box-sizing 并不适用。Edge 不会出现该问题,并且 IE 9 的属性 currentStyle 不能返回正确的高度值。

[2] 浏览器厂商已移除 -webkit 前缀, 534.12.

相关链接

文档标签和贡献者

最后编辑者: zhuangyin,