Css利用box-sizing:border-box限定内边距和边框在固定宽度和高度内执行

box-sizing是css3的新属性,今天我们来讲一下它的一个值:border-box

我们举例来说明

有一个div盒子,它的宽度是200px,边框宽度是5px,内边距是10px.那么这个盒子的实际宽度应该是:200 + 5*2 + 10*2 = 230px;

现在我们给这个盒子增加一个css属性 box-sizing:border-box; 那么这个盒子的实际宽度还是规定的200px,边框和内边距的大小在盒子的内部执行。

它有一个好处就是不用我们在布局的时候算来算去,省去很多麻烦。

所以,一般情况下,我们会在css的样式中增加如下样式,让所有元素默认都是box-sizing:border-box;

如果有特殊情况,我们不需要box-sizing:border-box;,那么我们可以利用box-sizing的另一个属性值content-box来恢复默认;

比如p元素:

p{box-sizing:content-box}

这样的话,p元素就不会执行border-box了

 

飞鱼

发表评论

电子邮件地址不会被公开。 必填项已用*标注