box-sizing:border-box的用法释义

洪七公

很简单的用一句话说：当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。

例如：

<div class="box">举个例子</div>

.box {  

    width: 500px;     

    height:100px;  

    border: 1px solid #000;

    -webkit-box-sizing: border-box;     

    -moz-box-sizing: border-box;

     box-sizing: border-box;

}

如果这时候你加上一个内边距属性，padding: 10px;

这个div不会撑开，即你所见的边框位置没有任何变动，但是“举个例子”这句话会和div边框有10px的间距。

一般在写页面的时候用这个属性就不会再考虑边框和内边距会改变整体所占宽度，即不用再根据盒子模型再去计算，省去很多麻烦。