CSS 元素显示模式
在网页开发中，HTML 元素默认的表现形态决定了它们如何排列、计算尺寸以及相互嵌套。简单来说，这就是元素'如何展示自己'以及'如何与其他元素相处'。浏览器为每个标签预设了默认的显示模式，而通过 CSS 的 display 属性，我们可以灵活修改这些行为，这是实现复杂布局的关键。
三大核心显示模式
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设置无效，尺寸由内容决定。 - 边距限制：
margin和padding仅左右方向生效，上下方向不影响布局。 - 嵌套限制：只能容纳文本或其他行内元素，不能嵌套块级元素。
代码示例：
.span1 {
/* 宽高设置无效 */
: ;
: ;
: hotpink;
}
