什么是 block 元素？
在 CSS 中，display: block 是一种常见的显示类型。具有该特性的元素被称为“块级元素”。
它们在页面中独占一行，默认宽度为父容器的 100%，可以设置宽高、内外边距等盒模型属性。
block 元素的核心特性
- 独占一行（前后自动换行）
- 默认宽度为父容器的 100%
- 可以设置 width、height、padding、margin 等属性
- 垂直方向上 margin 会折叠（margin collapsing）
- 内部可包含其他块级或内联元素
常见 block 元素示例
<div>, <p>, <h1> ~ <h6>, <ul>, <ol>, <li>, <section>, <article>, <header>, <footer>
将元素设为 block
即使原本是内联元素（如 <span>），也可以通过 CSS 强制变为 block：
span {
display: block;
}
display: block;
}
block 与 layout 的关系
block 元素构成了传统网页布局的基础。在 Flexbox 和 Grid 出现之前， 大多数页面结构都依赖于 block 元素的堆叠和嵌套来实现。