元素布局——理解box-sizing

最新推荐文章于 2025-08-14 13:53:23 发布

moderate_ace

最新推荐文章于 2025-08-14 13:53:23 发布

阅读量546

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML/CSS 文章标签： box-sizing layout css3 盒子模型盒子模型尺寸基准

本文链接：https://blog.youkuaiyun.com/sinat_22599079/article/details/45171919

HTML/CSS 专栏收录该内容

4 篇文章

订阅专栏

本文详细解析了CSS3盒模型的错误解释在IE浏览器中的表现，并介绍了box-sizing属性如何解决这一问题，提供了不同属性值的兼容性和实例演示。

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

由来

IE 的一个 bug 是对于盒子模型的错误解释：在 IE5.x 以及 Quirks 模式的 IE6/7 中，将 border 与 padding 都包含在 width 之内。

同时，由于另外一些浏览器对标准的遵从，我们在精确定义一个在有限空间内显示的 box 时，也需要计算一下：留给它的空间只有那么大，刨去 border 和 padding，我们该把它的 width 写成多少。

这种情况在 CSS3 时代有了改善，得益于这个叫做 box-sizing 的属性，定义 box-sizing: content-box 时，浏览器对盒模型的解释遵从我们之前认识到的 W3C 标准；定义 box-sizing: border-box 时，浏览器对盒模型的解释与 IE6 相同；而定义 box-sizing: padding-box 仅被 Firefox 支持。

概念

属性值：

content-box（默认值）：border和padding不计算入width和height之内
（width和height只包括content）

padding-box：padding计算入width和height之内
（width和height包括content+padding）

border-box：border和padding计算入width和height之内
（width和height包括content+padding+border）
兼容性：

值	Chrome	Firefox	IE	Opera	Safari
content-box/border-box	√	√	8.0+	√	√
padding-box	×	√	×	×	×

举例

<!DOCTYPE html>
<html>
<head>
    <style>
        .div1 {
            text-align: center;
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 20px solid lightblue;
            padding: 20px;
        }
        .div2 {
            text-align: center;
            box-sizing: padding-box;
            -moz-box-sizing: padding-box;
            -webkit-box-sizing: padding-box;
            width: 200px;
            height: 200px;
            background-color: lightblue;
            border: 20px solid pink;
            padding: 20px;
        }
        .div3 {
            text-align: center;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 20px solid lightblue;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="div1">content-box<br>width:200px;<br>height:200px;<br>border:20px;<br>padding: 20px;</div>
    <div class="div2">padding-box<br>width:200px;<br>height:200px;<br>border:20px;<br>padding: 20px;</div>
    <div class="div3">border-box<br>width:200px;<br>height:200px;<br>border:20px;<br>padding: 20px;</div>
</body>
</html>