9月 122016
 

网上找到的关于box-sizing描述的比较清楚的资料,记录下:

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“两个值。

box-sizing:content-box

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

box-sizing: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;
}

Sorry, the comment form is closed at this time.