likes
comments
collection
share

深入CSS——盒子模型📦

作者站长头像
站长
· 阅读数 26

大家在初学CSS时，一定都接触过盒子模型，这也是必考必问的前端知识点，但是大部分人可能只是知道HTML中的所有标签在浏览器中都会被渲染成盒子形状，但可能对两种盒子模型的概念盒使用不是很熟悉。在这篇文章，将带大家深入理解盒子模型。

什么是CSS盒子模型？

CSS盒子模型是浏览器在渲染HTML元素时使用的一种布局模型。它将每个HTML元素表示为一个矩形盒子，并通过盒子的不同部分（content、padding、border、margin）来控制元素的大小和位置。

一个典型的盒子模型包括以下几个部分：

  • Content（内容） ：元素的实际内容。
  • Padding（内边距） ：内容周围的空白区域，位于内容和边框之间。
  • Border（边框） ：包裹内容和内边距的边界。
  • Margin（外边距） ：盒子外部的空白区域，用于与其他元素的距离。

如图所示，这就是个 标准盒子 模型的示意图。

深入CSS——盒子模型📦

盒模型的类型

盒子模型又分为两种。而最常见的就是标准盒模型。

标准盒模型

标准盒模型也是谷歌的模型，如果我们没有去定义是什么类型的话，默认就是标准盒模型。(box-sizing: content-box)

在标准盒模型中，元素的width属性只包括内容的宽度，不包括内边距和边框，总宽度计算方式如下： 总宽度 = content(width) + padding + border + margin

这里我们讲解一种比较易错的点。在标准盒模型中，当容器的宽度固定时，设置内边距会增加元素的实际宽度，因为内边距和边框会被加在内容宽度上。当我们定死了元素的 width 后，再加 padding 或 margin 整个元素占的面积会被撑大，就像建房子时，墙壁往外建的效果一样。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标准盒模型示例</title>
    <style>
        .standard-box {
            width: 200px; /* 固定宽度 */
            padding: 20px; /* 内边距 */
            border: 10px solid black; /* 边框 */
            margin: 30px; /* 外边距 */
            box-sizing: content-box; /* 标准盒模型 */
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="standard-box">标准盒模型</div>
</body>
</html>

深入CSS——盒子模型📦

在这个示例中，.standard-box元素的内容区宽度是200px，再加上padding和border，其实际宽度会变为：

200px (内容宽度) + 2 * 20px (内边距) + 2 * 10px (边框) = 260px

IE盒模型（怪异盒模型）

要将布局调整为 IE盒模型的话，那就要 (box-sizing: border-box) ，如果不切换成 IE盒模型，那默认就是标准盒模型。在IE盒模型中，元素的width属性包含了内容、内边距和边框的总和。总宽度计算方式如下： 总宽度 = width (content + padding + border) + margin

示例如下图所示：

深入CSS——盒子模型📦

而IE模型中的易错点就是，当容器的宽度固定时，设置内边距不会改变可用内容区的宽度，内边距会从总宽度中扣除。再举个不恰当的例子就是，在建房子的时候被规定了只能在一定的面积里建房子，墙壁不能建在范围外面，那房子的墙壁就会挤占整个面积。而在IE盒子模型就是 padding 会和 其他两个去抢占面积。

下面是代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IE盒模型示例</title>
    <style>
        .ie-box {
            width: 200px; /* 固定宽度 */
            padding: 20px; /* 内边距 */
            border: 10px solid black; /* 边框 */
            margin: 30px; /* 外边距 */
            box-sizing: border-box; /* IE盒模型 */
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <div class="ie-box">IE盒模型</div>
</body>
</html>

在这个示例中，.ie-box元素的总宽度依然是200px，即使加了padding和border，它们都会在200px的宽度内进行调整，不会超出这个宽度。

深入CSS——盒子模型📦

可以看到，content 不是外面设置的 200px了。而是从已经设置的 border 和 padding 抢占的。

而我们如果不设置边框的话

深入CSS——盒子模型📦

content 就抢占的更多了，也更大了。

应用场景

标准盒模型

适用于需要精确控制内容区尺寸的场景，例如：

  • 设计需要固定内容宽度的文本块。
  • 图片展示区域，确保图片不被内边距和边框影响。

IE盒模型

适用于需要固定整体大小的场景，例如：

  • 固定宽度的按钮，不管内边距和边框的大小如何变化，按钮的总宽度都保持不变。
  • 响应式布局中，确保元素在不同设备上具有一致的外观。

总结

通过本文的介绍，我们详细了解了CSS盒子模型的基础概念及其在不同浏览器中的实现差异。标准盒模型和IE盒模型在处理宽度和内边距时有显著不同，这种理解对于精确控制网页布局非常重要。标准盒模型将宽度定义为内容区的宽度，而IE盒模型将宽度包括内容、内边距和边框。通过使用CSS属性box-sizing，我们可以在不同盒模型之间进行切换，以满足具体布局需求。如果这篇文章对你有帮助的话，可以点个赞哦😊！

转载自:https://juejin.cn/post/7399296053215100991
评论
请登录