box-sizing

摘要

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

语法

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;
}

规范

浏览器兼容性

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

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

相关链接

• CSS box model