CSS3中的box-sizing属性

最新推荐文章于 2023-09-21 15:34:29 发布

转载最新推荐文章于 2023-09-21 15:34:29 发布 · 303 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000011761313

本文详细介绍了CSS3中的box-sizing属性，解释了content-box和border-box两种属性值的区别及应用场景，通过实例展示了如何利用box-sizing简化响应式设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

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

    .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

<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这个大小是怎么来的，我们不妨计算一下：

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

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

对于第二个div：

第二个div

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

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

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

浏览器的兼容性

桌面端
手机端

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

跟多详细内容请参考：https://developer.mozilla.org...