CSS3 中的 Box-sizing 盒子模型介绍

Question

Box-sizing 的 CSS 属性是用来改变默认的 CSS 框模型，用于计算元素的宽度和高度。它可以使用这个属性来模拟浏览器的行为不正确支持 CSS 盒模型的规范。

说到 IE 的 Bug，在 IE6以前的版本中，IE 对盒模型的解析出现一些问题，跟其它浏览器不同，将 border 与 padding 都包含在 width 之内。而另外一些浏览器则与它相反，是不包括 border 和padding 的。

在我们开发的过程中会发现，有时候如果对页面中的大区域进行设置时，将 border、padding 计算到 width 和 height 之内，反而更灵活。但 W3C 的 CSS2.1 规范却规定了他们并不能被包含其中。考虑到这个问题，CSS3 中引入了一个新的属性 box-sizing，它具有 content-box 和 border-box 两个值。

Content-box

当我们设置 box-sizing:content-box; 时，浏览器对盒模型的解释遵从我们之前认识到的 W3C 标准，当它定义 width 和 height 时，它的宽度不包括 border 和 padding。

Border-box

当我们设置 box-sizing: border-box; 时，浏览器对盒模型的解释与 IE6 之前的版本相同，当它定义 width 和 height 时，border 和 padding 则是被包含在宽高之内的。内容的宽和高可以通过定义的 width 和 height 减去相应方向的 padding 和 border 的宽度得到。内容的宽和高必须保证不能为负，必要时将自动增大该元素 border box 的尺寸以使其内容的宽或高最小为 0。

Box-sizing 属性

• 初始值：content-box
• 适用于：接受的所有元素的宽度或高度
• 继承：无
• 媒体：visual
• 指定的：as specified
• 动画：no
• 规范秩序：独特的无歧义的正式语法定义的顺序

Box-sizing 属性语法

Formal syntax: content-box | padding-box | border-box
box-sizing: content-box
box-sizing: padding-box
box-sizing: border-box
box-sizing: inherit

Box-sizing 属性取值

content-box

这是默认样式指定 CSS 标准。测量 winth 和 height 属性只包括的内容，但不是 border、margin 或者 padding。

padding-box

winth 和 height 属性包括 padding 的大小，不包括 border 和 margin

border-box

winth 和 height 属性包括 padding 和 border，但不是 margin。这是盒模型的文档时，Internet Explorer 使用 Quirks 怪异模式。

Box-sizing属性示例

/* support Firefox, WebKit, Opera and IE8+ */
.example {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
}