css3 box-sizing属性

box-sizing属性支持IE8以上浏览器。

box-sizing属性有2个值：

content-box  //border和padding不计算入width之内

border-box  //border-box，border和padding计算入width之内

字面是解释很难懂它到底是干什么用的用实例说话：

div.container
{
width:30em;
border:1em solid;
}
div.box
{
width:50%;
float:left;
background:red;
}

<div class="container">
 <div class="box">这个 div 占据左半部分。</div>
 <div class="box">这个 div 占据右半部分。</div>
</div>

以上CSS可以让2个div并排，但是在这两个div中加入border或者padding就会撑开，如：

加了border或者padding就相当于多出了width部分会被撑出来，如果希望加上border或者padding，一样也保持着并排效果就使用：

box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */

这样width就会智能计算把border或者padding加入进来实现并排效果：