前端样式全方位排版测试

这个页面用于验证我们整合后的 style.css 是否完美解决了以下问题：

1. 列表行高是否舒适（不挤也不散）。
2. 有序列表是否有“双数字”或“序号丢失”。
3. 嵌套列表的缩进和间距是否逻辑清晰。

---

1. 基础列表测试

无序列表 (Unordered List)

• 短列表项：检查间距。
• 长列表项测试：这是一段很长很长的文字，用于测试在 li 内部发生折行时，line-height 是否生效。如果行高正常，这一行文字与下一行文字之间应该有足够的呼吸感，而不是紧紧贴在一起。

有序列表 (Ordered List)

1. 第一项：检查是否有唯一的数字序号。
2. 第二项：检查数字后是否有合适的间距。
3. 第三项：检查 list-style-position 是否为 outside。

---

2. 深度嵌套测试（修罗场）

这是最容易出 Bug 的地方，请重点检查缩进和符号：

• 父级无序列表 A
  • 子级无序列表 A-1
    • 孙级无序列表（三级缩进测试）
• 父级无序列表 B
  1. 嵌套有序列表 B-1：检查数字是否从 1 开始。
  2. 嵌套有序列表 B-2：
     • 甚至可以在这里再套一层。
     • 检查这里的间距是否因为堆叠而变得过大。

---

3. 混合排版与代码测试

在列表中插入代码是常见的操作，需要检查对齐：

1. 命令行测试：运行 npm run build 来观察代码块高度。
2. 路径测试：检查 /vercel/path0/dist/css/style.css 在行内是否撑开了行高。
3. 复杂行高：
   • 当列表项包含 inline code 如 [Net.SecurityProtocolType]::Tls12 时。
   • 检查加粗文本 Bold Text 是否会导致行内局促。

---

4. 引用与样式对比

这是一段引用测试。 用于对比 blockquote 的样式与普通列表的视觉权重。

• 列表项紧贴引用，检查 margin-top。

---

5. 任务列表（Task List）

• 已完成的列表项样式
• 未完成的列表项样式