什么是 Block 元素？
在 HTML 中，block 元素是指默认占据一整行空间的元素。
它们会在页面上从上到下垂直排列，前后自动换行。
常见的 block 元素包括：<div>、<p>、<h1> 到 <h6>、<ul>、<li> 等。
CSS 中的 display: block
通过设置 display: block;，可将任何元素（如 <span> 或 <a>）转换为块级元素。
span {
display: block;
width: 100%;
margin: 10px 0;
}
display: block;
width: 100%;
margin: 10px 0;
}
Block 布局的特点
- 独占一行，宽度默认为父容器的 100%
- 可以设置 width、height、margin、padding 等盒模型属性
- 垂直方向堆叠，不会与其他 block 元素并排显示（除非使用浮动或 Flex/Grid）
实际应用场景
Block 布局广泛用于：
- 页面整体结构划分（如 header、main、footer）
- 段落文本排版
- 列表内容展示
- 表单控件容器