box-sizing:border-box;和 box-sizing:content-box；

最新推荐文章于 2025-07-14 14:22:40 发布

原创最新推荐文章于 2025-07-14 14:22:40 发布 · 756 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#浏览器

html 专栏收录该内容

9 篇文章

订阅专栏

本文探讨了浏览器解析页面方式的差异导致的兼容性问题，包括盒子模型的理解与应用，以及解决方法。

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

不同的浏览器解析页面方式稍有不同，就会出现兼容问题。

如下：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .cls{
            width: 300px;
            height: 200px;
            border: 4px solid red;
            padding: 2px;
        }
    </style>
</head>
<body>
    <div class="cls"></div>
</body>
</html>

IE：解析盒子模型 box-sizing:border-box
这里写图片描述
width=288+2*2=300
可以看出来实际宽度的区域设置的是300px，现在只显示288px，这里看出padding所占的2px是从原来宽度300px中减去的，

主流浏览器：解析盒子模型 box-sizing:content-box;（默认）
这里写图片描述
显示正常和定义的宽度相互吻合

使用场景：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .cls{
            width: 300px;
            height: 200px;
            clear: both;
            border: 1px solid #000;
        }
        .c1{
            width: 150px;
            height: 200px;
            background-color: yellow;
        }
        .c2{
            width: 150px;
            height: 200px;
            background-color: red;
        }
        .cls div{
            float: left;
        }
    </style>
</head>
<body>
    <div class="cls">
        <div class="c1"></div>
        <div class="c2"></div>
    </div>
</body>
</html>

显示：
这里写图片描述
//注意这时我们给右侧红色的div添加3px的boder

.c2{
            width: 150px;
            height: 200px;
            background-color: red;
            border: 3px solid #AABBCC;
        }

效果图：
这里写图片描述
原因：盒子模型默认的解析方式是 box-sizing:content-box;（默认）padding和boder不会计算进width
父元素div的widht=300px，左侧黄色div width=150px，右侧宽度 div width=150px 和boder3px，
子元素的总体大于父元素300px。