css3中的box-sizing属性

小灰灰 2022-08-20 16:06 152阅读 0赞

## 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` ###

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

### `padding-box` ###

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

### `border-box` ###

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