box-sizing属性

今天在做时间滑动条的时候，遇到box-sizing的问题，记录下来。

举个例子，下面的布局：

<div class="date-slider-scales">
<span class="date-slider-scale" style="width:33.529411764705884px"> </span><span class="date-slider-scale" style="width:33.529411764705884px"> </span>
<span class="date-slider-scale" style="width:33.529411764705884px"> </span><span class="date-slider-scale" style="width:33.529411764705884px"> </span>
<span class="date-slider-scale" style="width:33.529411764705884px"> </span><span class="date-slider-scale" style="width:33.529411764705884px"> </span>
<span class="date-slider-scale" style="width:33.529411764705884px"> </span><span class="date-slider-scale" style="width:33.529411764705884px"> </span>
<span class="date-slider-scale" style="width:33.529411764705884px"> </span><span class="date-slider-scale" style="width:33.529411764705884px"> </span>
<span class="date-slider-scale" style="width:33.529411764705884px"> </span><span class="date-slider-scale" style="width:33.529411764705884px"> </span>
<span class="date-slider-scale" style="width:33.529411764705884px"> </span><span class="date-slider-scale" style="width:33.529411764705884px"> </span>
<span class="date-slider-scale" style="width:33.529411764705884px"> </span><span class="date-slider-scale" style="width:33.529411764705884px"> </span>
<span class="date-slider-scale" style="width:33.529411764705884px"> </span><span class="date-slider-scale" style="width:33.529411764705884px"> </span>
<span class="date-slider-scale" style="width:33.529411764705884px"> </span><span class="date-slider-scale" style="width:33.529411764705884px"> </span>
<span class="date-slider-scale" style="width:33.529411764705884px"> </span><span class="date-slider-scale" style="width:33.529411764705884px"> </span>
<span class="date-slider-scale" style="width:33.529411764705884px"> </span><span class="date-slider-scale" style="width:33.529411764705884px"> </span>
<span class="date-slider-scale" style="width:33.529411764705884px"> </span><span class="date-slider-scale" style="width:33.529411764705884px"> </span>
<span class="date-slider-scale" style="width:33.529411764705884px"> </span><span class="date-slider-scale" style="width:33.529411764705884px"> </span>
<span class="date-slider-scale" style="width:33.529411764705884px"> </span><span class="date-slider-scale" style="width:33.529411764705884px"> </span>
<span class="date-slider-scale" style="width:33.529411764705884px"> </span><span class="date-slider-scale" style="width:33.529411764705884px"> </span>
</div>

（1）

css中没有加下面的设置：

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

此时用开发工具看样式：

每隔一个date-slider-scale，宽度 35px，34px，这样反复循环。

此时盒模型

border:1px没有包含在width中。

本来每个date-slider-scale宽度为33.529411764705884px，这样，在实际中，会有1px的误差，当数量多的时候，误差会很明显。

（2）

css中加入下面的设置：

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

此时用开发工具看样式：

每隔一个date-slider-scale，宽度 34px，33px，这样反复循环。

此时盒模型

border:1px包含在width中了。

这样看起来，每隔date-slider-scale的宽度一样了。当数量很多的时候，基本上没有偏差。

===================

分析：

说到 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。