理解 CSS 中的盒子模型

2025-05-28

理解 CSS 中的盒子模型

目录

  • 介绍
  • 什么是盒子模型？
  • 盒子类型
  • 盒子尺寸
  • 额外提示
  • 结论

介绍

当你开始学习 HTML 和 CSS 时，事情很快就会变得难以应付。至少对我来说是这样。

你发现 HTML 元素、CSS 属性和值多得惊人，你开始想着要把它们全都记住。不然你还能怎么学习网页开发呢？

错误的。

感谢谷歌，你可以在需要的时候查找信息。例如如何禁用textarea元素的大小调整，或者更改元素上光标的类型等详细信息。

但这并不适用于所有情况。

为了打下坚实的基础，您必须非常了解一些重要的概念，以促进您在 Web 开发方面的进步和成长。

你应该重点理解这些概念。CSS 的级联行为、特殊性、浏览器是什么、客户端/服务器架构，都属于这一类。

CSS 的基础支柱之一是盒子模型。它决定了每个元素在浏览器中的呈现方式。

什么是盒子模型？

它是一种 CSS 标准，根据 CSS 样式将文档的元素表示为具有某些属性（大小、定位、元素堆栈……）的框。

简而言之，每个 HTML 元素都是这种类型的框：

盒子模型图

每个盒子都有一个内容区域。元素的内容可以是文本、图像、嵌套元素等。

除了内容区域之外，元素还可能有（如上所示）：

  • 填充区域：内容与边框之间的空间。此区域的大小由填充属性定义：、 和padding-top。padding-right或者简称为。padding-bottompadding-leftpadding

  • 边框：内边距 (padding) 和外边距 (margin) 之间的空间。该区域的大小由border-width属性定义（与内边距相同：上、右、下、左）。

  • 边距区域：元素与其相邻元素之间的空间。此区域的大小由margin属性定义，可以为边距设置负值。

速记的快速解释（如果您熟悉，请随意跳过）：

简写属性是组合其他属性的 CSS 属性。我们使用它们来减少代码编写并使其更易于阅读。

我们将以此padding为例，同样的想法也适用于其他速记。

简写属性padding可以采用：

  • 一个值：padding: 1rem。

这与以下写法相同：

padding-right: 1rem;
padding-top: 1rem;
padding-bottom: 1rem;
padding-left: 1rem;
Enter fullscreen mode Exit fullscreen mode
  • 两个值：padding: 1rem 2rem。

这相当于：

padding-top: 1rem;
padding-bottom: 1rem;
padding-right: 2rem;
padding-left: 2rem;
Enter fullscreen mode Exit fullscreen mode
  • 四个价值观：padding: 1rem 2rem 3rem 4rem。

这个元素看起来会很奇怪，但请忽略它，这只是为了举例子：3

它与以下内容相同：

padding-top: 1rem;
padding-right: 2rem;
padding-bottom: 3rem;
padding-left: 4rem;
Enter fullscreen mode Exit fullscreen mode

记住最后一部分的经验法则是描绘时钟的运动：它从顶部到右侧，到底部，然后到左侧。

盒子类型

现在我们已经大致了解了元素是如何用盒子来表示的。接下来我们将探索不同类型的盒子是如何拥有不同行为的。

不同类型的框基于以下display值：block、inline和inline-block。

我强烈建议你尝试一下，以便掌握它。

块型盒

属于此类型的元素是那些将display属性设置为 的元素block，无论是默认设置（如div）还是手动设置（display: block使用 CSS 添加到元素）。

  • 从新行开始。

  • height、、、均已应用并按预期工作width。marginpadding

  • 除非另有规定，元素的宽度将填充其父容器。

内联类型框

属于此类型的元素是那些将display属性设置为 的元素inline，无论是默认设置（如span）还是手动设置（display: inline使用 CSS 添加到元素）。

  • 如果还有剩余空间，它将被放置在前一个元素的旁边。否则，它将另起一行。

  • height并且width属性对元素没有影响。

  • 水平margin并padding应用且按预期工作。

  • 垂直margin和padding垂直属性在这里有点棘手，所以请耐心等待。这两个垂直属性都已应用（您可以使用开发者工具进行检查），但它们并没有按预期工作：

    • margin没有任何效果。内联元素与相邻元素之间没有间距。
    • padding确实有效果。您可以通过添加背景色来测试，但它不会影响相邻的元素。内边距不会挤压其他元素。

务必对上述内容进行实验，因为这类细节无法仅通过阅读来理解。创建块元素和内联元素，并尝试使用它们的width、和。heightmarginpadding

行内块类型框

是的，你没看错。这个盒子就是最后两种类型的后代。

属于此类型的元素是那些将display属性设置为 的元素inline-block，无论是默认设置（如button）还是手动设置（display: inline-block使用 CSS 添加到元素）。

  • 行为类似于内联：如果有剩余空间，则位于前一个元素旁边，否则从新行开始。

  • width，，height并且表现符合预期margin。padding

盒子尺寸

box-sizing是一个 CSS 属性，它定义属性height、width和如何协同工作。borderpadding

它有 2 个值（或模式）：

我们将在两种模式下检查此代码：

<div>Banana man</div>
Enter fullscreen mode Exit fullscreen mode 
div{
    height: 300px;
    width: 200px;
    border: 3px solid red;
    padding: 1rem;
}
Enter fullscreen mode Exit fullscreen mode

content-box（默认）

渲染后的尺寸将不等于CSS 中指定的height尺寸。width

而是（对于宽度）width+ padding-left+ padding-right+ border-left-width+ border-right-width。

来自我的开发工具的视觉表示（我使用 Firefox，这是来自 Firefox。使用 Firefox）：

上例开发者工具中的盒子模型

您可以看到，它height所做的width是指定内容区域尺寸，而不是整体元素尺寸。

border-box

渲染的尺寸正是CSS 中指定的height值。width

为了启用此模式，我们将添加box-sizing: border-box到我们的div。我们得到：

开发者工具中的 border-box 盒子模型

如您所见，内容区域的尺寸将被计算，以便我们的元素的整体尺寸与 200px 宽度和 300px 高度相匹配。

此模式通常最常用，并包含在 CSS 重置中。这样，您可以轻松完美地匹配您的网站设计像素，让浏览器轻松计算差异。

额外提示（调试 CSS）

由于网站中的所有内容都是矩形框，因此我们很容易在网站上将其形象化。

每当我在我的网站中遇到错误或我不理解的行为（布局、定位等）时，我都会添加border: 1px solid red所有我怀疑的元素。

不过，我会改变颜色来区分它们。你明白我的意思。

这样，您可以更好地了解网站的布局、所有内容的定位、边距、填充等，而无需使用开发人员工具单独检查每个元素。

结论

简而言之：每个网站都是一堆矩形框，嵌套在其他矩形框中。到处都是框。

这就是你对盒子模型的理解。CSS 的核心概念之一。一个主题讲完了（希望是 :3），还有很多内容！

感谢您的阅读！

就是这样。希望你学到了新东西，并且享受阅读！

我们热烈欢迎并感谢任何反馈或建设性批评，请在评论区告诉我你的想法，以便我改进质量。感谢阅读❤️

关注我的博客和Twitter了解更多信息！

祝你过得愉快。

照片由Kelli McClintock在Unsplash上拍摄

文章来源：https://dev.to/yamanidev/understanding-the-box-model-in-css-1af
Devto 翻译
PREV
JavaScript 项目构想和实际用途
NEXT
⚛️ ReactJS 文件夹结构 + 样板。