CSS3 box-sizing 属性用处
box-sizing
属性对于盒模型布局有重要意义,下面来看看这个属性是怎么回事吧
下面我们写个盒模型,看看它的实际宽高:
.box{
width: 100px;
height: 100px;
border: 10px solid #ccc;
padding: 10px;
background-color: antiquewhite;
}
<div class='box'></div>
下图为实际运行效果
DIV盒子我们预设的宽高是100px,但由于border
边框的宽度以及padding
内边距的介入,将盒子的实际宽高变成了下图。盒子实际宽度变成了100+20(左右边框)+20(左右内边距)=140
所以我们很多时候布局时不得不考虑边框和内边距对盒子的影响,十分的麻烦。
但有了box-sizing
这个属性后,就变得简单许多了。box-sizing
有两个主要属性值:content-box
(默认值),border-box
。上方案例我们没有设置box-sizing
属性,实际上它的值为:box-sizing:content-box;
下面我们将上方案例加上属性:box-sizing:border-box;看看效果
.box{
width: 100px;
height: 100px;
box-sizing:border-box;
border: 10px solid #ccc;
padding: 10px;
background-color: antiquewhite;
}
<div class='box'></div>
下方为运行效果,盒子明显变小了(没有对比可能不太明显)
我们来看看控制台的盒模型,就更加清楚了
此时,DIV盒模型总宽度变回了100,是我们预期的效果,只是将border
和padding
往盒子内部挤压了,我们实际内容宽度变成了60,但是这样就省去了计算的麻烦,让我们布局更加轻松了。
原创文章,作者:的的录,如若转载,请注明出处:https://www.dedenoob.com/html/css/26.html
-- 展开阅读全文 --