什么是 display: block？
在 CSS 中，display: block 是一种将元素渲染为“块级元素”的方式。
块级元素会独占一行，默认宽度为父容器的 100%，可以设置宽高、内外边距等。
常见的块级元素包括：<div>、<p>、<h1>-<h6>、<ul> 等。
基本语法
element {
display: block;
}
示例：将行内元素转为块级
默认情况下，<span> 是行内元素，不能设置宽高。使用 display: block 可使其表现如块级元素：
<span style="display: block; width: 200px; height: 50px; background: lightblue;"> 这是一个 span 元素 </span>
block 与其他 display 值的区别
inline：行内元素，不换行，不能设宽高（如<span>）。inline-block：兼具行内与块级特性，可设宽高但不换行。none：元素不显示且不占用空间。
常见用途
- 控制布局流，实现垂直堆叠结构。
- 使链接（
<a>）在导航栏中占据整行，提升点击区域。 - 重置元素默认显示行为以满足设计需求。