什么是 Block 元素？
在 CSS 中，block 元素（块级元素）是指默认占据其父容器整个宽度的元素，并且在其前后自动换行。
常见的 block 元素包括：<div>、<p>、<h1>–<h6>、<ul>、<li> 等。
Block 元素的主要特性
- 独占一行，前后自动换行；
- 可以设置
width、height、padding、margin等盒模型属性； - 默认宽度为父容器的 100%（除非显式设置）；
- 垂直方向上的
margin不会与其他 block 元素重叠（但可能发生 margin collapse）。
<div style="background: lightblue; width: 200px; height: 50px;">Block 元素</div>
<div style="background: lightgreen; width: 150px; height: 50px;">另一个 Block</div>
<div style="background: lightgreen; width: 150px; height: 50px;">另一个 Block</div>
Block 与 Inline 的区别
相比之下，inline 元素（如 <span>、<a>）不会换行，
也无法设置宽高（设置无效），只能通过内容撑开尺寸。
如何改变元素的显示类型？
使用 CSS 的 display 属性可控制元素的显示行为：
display: block;—— 转为块级元素；display: inline;—— 转为行内元素；display: inline-block;—— 行内块元素（兼具两者特性）。
实际应用场景
Block 元素广泛用于页面结构搭建，例如：
- 页面分区（header / main / footer）；
- 段落文本排版；
- 列表和导航栏容器。