css3 box-sizing属性

css3 box-sizing属性有三个值：content-box（default），border-box。

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

来看代码：

<div class='content-box'>content-box</div><br>
<div class='border-box'>border-box</div>

.content-box{
    width:100px;
    height:100px;
    background:yellow;
    border:5px solid #000;
    padding:10px;
    box-sizing:content-box;
    -webkit-box-sizing:content-box;
}
.border-box{
    width:100px;
    height:100px;
    background:yellow;
    border:5px solid #000;
    padding:10px;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

效果：

可以看到，很明显的border-box属性的宽高都小于content-box。审查元素会发现border-box类的div的border和padding都包含在了width和height属性中。