frontend

CSS3中的box-sizing属性

1

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

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

在默认情况下，设置的width和height属性都是指元素内容（content box）的高度和宽度，如果这个元素设置了border或padding的话，那么整个元素的高度和宽度就是：

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：这种情况下，你设置的width和height属性值就是针对整个元素，包括了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，可是现实效果却完全不同：

4771

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

4986

5118

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

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

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

对于第二个div：

6090

6223

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

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

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

浏览器的兼容性

  • 桌面端
    7243

  • 手机端
    7383

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

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

欢迎阅读本篇文章，如有兴趣可以关注博主公众号哦：