、
、
、
、
）则是结构驱动的，它们用于构建页面的主要骨架，每个块级元素都会从新的一行开始，并尽可能占据可用宽度。你可以自由地为块级元素设置
width、
height、
margin和
padding，这些属性都会按照预期影响元素的尺寸和与其他元素的距离。
在我看来，这种区分并非是为了给开发者添麻烦，而是提供了一种默认的、直观的布局逻辑。当我们开始写HTML时，就已经有了一个关于元素如何表现的基本预期。比如，你写一个标题，自然希望它独占一行，所以
为什么理解行内与块级元素对网页布局至关重要？
我觉得，这就像是盖房子前，你得先知道你手里的砖头是实心砖还是空心砖，它们各自能承受多少重量，以及如何堆砌才能稳固。在网页布局中，行内元素和块级元素的特性，直接决定了它们在页面上的“占位”和“互动”方式。如果你不清楚这一点，就很容易在布局时遇到各种奇怪的问题。
举个例子，很多初学者会疑惑为什么给一个width: 200px;却没有任何效果，或者为什么两个标签总是上下排列而不是并排。这些问题的根源，就在于对元素默认显示类型的混淆。块级元素天生就是“霸道”的，它要独占一行；行内元素则是“谦逊”的，它只求能与同伴共享空间。
更深层次地说，这种理解有助于我们更高效地使用CSS。比如，当你需要将一组导航链接水平排列时，如果你不明白float）它们，或者使用复杂的定位。但如果你知道它的行内特性，你可能会想到用display: block;或者display: inline-block;来改变其行为，从而获得更灵活的控制，或者干脆直接用Flexbox或Grid这些现代布局方式，它们在处理块级元素的排列上更为强大。
所以，理解行内与块级元素，不仅仅是记住几个概念，更是掌握了一种思维模式：如何预判元素在页面上的表现，以及如何通过CSS去精准地调整这种表现，以达到我们理想的布局效果。这是从“写出能跑的代码”到“写出优雅且易于维护的代码”的关键一步。
常见的行内元素和块级元素有哪些，它们各自的特性是什么？
我们每天都在用的HTML标签，其实大部分都属于这两类。搞清楚它们各自的代表和特性，能大大减少布局时的困惑。
常见的块级元素：
: 最常用的通用容器，没有任何语义，纯粹为了布局而存在。
块级元素的特性：
- 独占一行： 无论内容多少，都会从新的一行开始，并强制其后的内容也另起一行。
- 宽度自适应： 默认情况下，宽度会扩展到其父容器的100%。
- 可设置宽高： 可以通过CSS设置
width、height属性。 - 盒模型完整：
margin、padding、border在四个方向上都有效，会影响元素的尺寸和位置。 - 可以包含行内元素和块级元素： 这是它们作为容器的根本属性。
常见的行内元素：
