CSS 元素显示模式
2.1 什么是元素显示模式？
元素显示模式指的是 HTML 元素在页面中默认的表现形态，它决定了元素的排列方式、尺寸计算规则和嵌套关系。简单来说，就是元素'如何展示自己'以及'如何与其他元素相处'。
浏览器会为每个 HTML 标签预设默认的显示模式，例如：
<div>默认占据一整行（块级模式）<span>默认与其他元素并排显示（行内模式）<input>既可以并排显示又能设置宽高（行内块模式）
我们可以通过 CSS 的 display 属性修改元素的显示模式，这是实现灵活布局的关键技巧。
2.2 三大核心显示模式详解
1. 块级元素（Block Level Elements）
典型标签：<div>、<h1>-<h6>、<p>、<ul>、<ol>、<li>、<header>、<footer> 等
核心特性：
- 独占一行：无论内容多少，都会单独占据一整行空间
- 尺寸可控：可以通过
width和height属性设置宽高 - 默认宽度：未设置时默认占满父容器的 100% 宽度
- 边距生效：
margin和padding的四个方向（上下左右）都能正常生效 - 容器特性：可以嵌套其他块级元素或行内元素
代码示例：
.change {
height: 200px;
background-color: aqua;
}
注意事项：
- 文字类块元素（如
<p>、<h1>-<h6>）不能嵌套其他块级元素，例如<p>中不能放<div> - 块元素虽然可以嵌套行内元素，但语义上应保持合理（如导航容器嵌套链接）
2. 行内元素（Inline Elements）
典型标签：<span>、<a>、<strong>、<em>、<b>、<i>、<del>、<ins> 等
核心特性：
- 并肩排列：多个行内元素可以在同一行显示
- 尺寸受限：
width和height设置无效，尺寸由内容决定 - ： 和 仅左右方向生效，上下方向不影响布局
