=在W3School里面的CSS box-sizing属性中,我们可以看到box-sizing的定义如下:
我们通过例子来详细地讲诉一下width:100%和padding结合起来使用可能会带来的问题及如何用box-sizing解决。
我们新建两个div, 让第二个嵌在第一个里面。
HTML代码:
<div class="firstDiv" sand>
<div class="secondDiv">
div2
</div>
</div>
CSS代码:
.firstDiv
{
width: 100px;
height: 100px;
background-color: red;
}
.secondDiv
{
width: 100%;
height: 80px;
background-color: yellow;
}
效果图:
接下来我们想让第二个div中的文字的左边空出20px, 即设置padding-left: 20px.
CSS代码:
.secondDiv
{
width: 100%;
padding-left: 20px;
height: 80px;
background-color: yellow;
}
效果图:
我们可以看到,设置了padding之后,第二个div的宽度也随着变化了,但是我们设置的宽度明明是100%,即应该和第一个div的宽度是一样的,这是为什么呢?这是因为我们没有设置box-sizing的值,所以它用的是默认值content-box。content-box的定义为宽度和高度分别应用到元素的内容框。所以在刚才的例子中,width:100%即100px是内容框的宽度,div实际的宽度应该加上刚才设置的padding-left的值20px, 总共为120px。正如我们看到的,第二个div的宽度比第一个还要大。
那我们怎样才能既加上padding, 又不增加宽度呢?一种方法是将div的宽度从100%改为80px,第二种就是设置box-sizing为border-box。border-box决定了为元素设定的宽度和高度是元素的边框盒的宽度和高度, 即为元素指定的任何内边距padding和边框border都将在已设定的宽度和高度内进行绘制。而第二种是比较常用的方法。
CSS代码:
.secondDiv
{
width: 100%;
padding-left: 20px;
box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox */
-webkit-box-sizing: border-box; /* Safari */
height: 80px;
background-color: yellow;
}
效果图:
为了适应各个浏览器的需求,我们需要额外设置-moz-box-sizing和-webkit-box-sizing的值也为border-box。
自己动手试试吧: box-sizing Example on JSFiddle