了解 CSS 盒模型：内容盒与边框盒、内联元素与块元素

作为前端开发人员，了解 css 盒模型是make-or-break能够提供像素完美的布局。让我们深入讨论一下内联元素和块元素在两种盒模型类型（内容盒和边框盒）的上下文中的行为有何不同。

基础知识：盒子里有什么？

在详细介绍之前，有必要回顾一下盒模型是什么。页面上的每个元素都是一个盒子（是的，即使是那些实际上看起来不是四方形的元素）。盒子可能位于其他盒子内、包含其他盒子和/或与其他盒子并排。

盒子模型适用于所有这些，并包含：

• 内容框： HTML 元素或 CSS 伪元素，其中包含您的实际内容 - 文本、图像、您拥有的内容。
• Padding:内容和边框之间的空间。
• 边框:围绕内边距和内容的线条。
• Margin:边框外的空间，将其他元素推开。

因此，几乎每个 HTML 元素（包括

）以及每个 CSS 伪元素都是一个盒子。该盒子的“墙壁”是您的边框，可以指定厚度（或宽度）。在该内容和该盒子的墙壁之间有填充。在这些墙壁和其他盒子之间有边距。

立即学习“前端免费学习笔记（深入）”；

内联元素和块元素之间的主要区别

了解盒模型如何影响内联元素与块元素的主要区别至关重要：

1. Width:块元素默认会展开以填充其容器。内联元素？它们只占用足够的空间来容纳内容。

2. Height:对于块状元素，padding、border、margin都会增加高度。无论垂直内边距或边框如何，内联元素都会保持在行高内。

3. 布局影响：块元素影响水平和垂直布局。内联元素都是水平流动的，对垂直间距的影响最小。

4. Margin Collapsing: Margin collapsing 是一种特定于块元素的行为，其中相邻的垂直边距可以合并（因此一个元素上的 margin-bottom:20px 可以折叠成一个margin-top:20px 在后面的元素上，创建一个 20px 的边距）。内联元素不玩这个游戏。

现在我们知道了盒模型的组件以及内联元素和块元素之间的区别，让我们看看内容框如何根据其是内联元素还是块元素而受到 box-sizing 属性的影响。#? ?#

框大小调整：内容框与边框框

box-sizing 属性控制元素的宽度和高度的计算方式，它可以显着影响布局。

1. 带有内联元素的内容框

当 box-sizing: content-box 应用于内联元素时:

• 宽度和高度：宽度仅由内容决定。在此宽度之上添加内边距、边框和边距。
• 布局影响：由于内联元素不会破坏文本流，因此元素的宽度仅与内容一样宽。垂直内边距和边框在视觉上存在，但不会影响周围线条的高度。

2. 带有块元素的内容框

当 box-sizing: content-box 应用于块元素时：

• 宽度和高度：指定的宽度或高度仅适用于内容区域。在此之外添加内边距和边框，增加元素的整体大小。
• 布局影响：除非另有说明，块元素默认扩展到其容器的整个宽度。内边距和边框会增加元素的大小，将相邻元素推得更远。

3. 带有内联元素的边框

当 box-sizing: border-box 应用于内联元素时:

• 宽度和高度：宽度包括内容、内边距和边框。内容区域缩小以容纳指定宽度内的内边距和边框。
• 布局影响：元素的宽度仍然由内容决定，但现在内边距和边框都包含在这个宽度内。垂直内边距和边框在视觉上仍然存在，但不会改变行高。

4. 带有块元素的边框

当 box-sizing: border-box 应用于块元素时：

• 宽度和高度：指定的宽度和高度包括内容、内边距和边框。这意味着无论您添加多少内边距或边框，元素的总大小都与指定的尺寸保持一致。
• 布局影响：块元素的大小更容易预测，因为内边距和边框包含在指定的宽度内。这使得布局设计更易于管理，尤其是在并排对齐元素时。

值得一提的是，虽然 content-box 是默认的，但 border-box 被广泛认为更直观并提供最大程度的控制。

CSS 盒模型不仅仅是一个强大的概念，它还是前端开发工具库中的基础工具。通过了解盒子大小如何以不同的方式影响内联和块元素，您可以开始创建既清晰又实用的完美布局，而无需为错误布局进行故障排除而烦恼。

如果您喜欢盒子模型上的下载，请将鼠标悬停在左上角的心形盒子上并表达对这篇文章的全部喜爱！