CSS3中的box-sizing属性

box-sizing属性是css3中新添加的属性,用来替换原来的css盒子模型,box-sizing属性值的不同,元素的高度和宽度的计算方法也不同。

1
2
3
4
/* box-sizing的三个属性值,我们只针对前两个说明 */
box-sizing: content-box;
box-sizing: border-box;
box-sizing: padding-box;

在默认情况下,设置的widthheight属性都是指元素内容(content box)的高度和宽度,如果这个元素设置了borderpadding的话,那么整个元素的高度和宽度就是:

1
2
totalWidth = border-left + padding-left + width + padding-right + border-right
totalHeight = border-top + padding-top + height + padding-bottom + border-bottom

所以,这个在做相应式设计的时候还是比较复杂的,现在,有了box-sizing属性,就可以根据不同的属性值计算元素的高度和宽度。

  • content-box:这是默认情况,根据这个属性值的名字也能大概猜出会是什么情况,整个元素的高度和宽度其实就是上面的两个公式
  • border-box:这种情况下,你设置的widthheight属性值就是针对整个元素,包括了border,padding,和元素内容。

简单的例子

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.box {
width: 150px;
height: 150px;
padding: 50px;
border: 5px solid blue;
background-color: orange;
}
.box1 {
box-sizing: content-box;
}
.box2 {
box-sizing: border-box;
}
HTML
1
2
3
4
5
6
<div class="box box1">
content-box
</div>
<div class="box box2">
border-box
</div>

代码中,我们对两个div设置了相同的height、width、border和padding,可是现实效果却完全不同:

demo

我们仔细分析下,两个div不同的地方在于box-sizing属性,第一个是content-box,第二个是border-box,针对第一个div,

第一个div

我们发现,整个元素的高度和宽度是260x260,而元素的内容的高度和宽度是150x150,正好是我们想要的,对于260这个大小是怎么来的,我们不妨计算一下:

1
2
5+50+150+50+5=260  // 高度
5+50+150+50+5=260 // 宽度

正好是260,符合最上面的两个公式,所以最后元素的尺寸是260x260,并不是我们设置的150x150

对于第二个div:

第二个div

很明显可以看到,第二个div里面的内容已经被挤了换行了,这个div的真实的高度和宽度和我们设置的一样,可以它的内容部分的尺寸只有40x40,远小于150,可以看到,这就是content-boxborder-box的区别了,再来计算一下:

1
2
150 = 5+50+40+50+5 // 高度
150 = 5+50+40+50+5 // 宽度

可知,整个元素的高度其实是包括了border、padding和内容的高度,宽度也是如此。

浏览器的兼容性

  • 桌面端

  • 手机端

可以看到,不管是手机端还是桌面端大部分都是不支持padding-box的,所以建议实际开发中避免使用padding-box

跟多详细内容请参考:https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing