CSS3 box-sizing 属性用处

box-sizing属性对于盒模型布局有重要意义,下面来看看这个属性是怎么回事吧
CSS3 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>

下方为运行效果,盒子明显变小了(没有对比可能不太明显)
box-sizing:border-box;设置后
我们来看看控制台的盒模型,就更加清楚了
控制台的盒模型
此时,DIV盒模型总宽度变回了100,是我们预期的效果,只是将borderpadding往盒子内部挤压了,我们实际内容宽度变成了60,但是这样就省去了计算的麻烦,让我们布局更加轻松了。

原创文章,作者:的的录,如若转载,请注明出处:https://www.dedenoob.com/html/css/26.html
-- 展开阅读全文 --
DedecmsV6原来只是第三方版本,官方版本还在准备中
« 上一篇 11-07
markdown的一些简单用法快捷键
下一篇 » 11-09

发表评论