CSS 初始化方案对比

三个案例使用相同 HTML 结构，右侧通过 URL 加载真实页面；左侧只展示每个方案额外添加的差异 CSS。代码区可滚动，避免长规则被裁掉。

这种组织方式避免模板字符串堆积：每个方案都是独立 HTML，差异样式放在 `cases/*.css`，公共演示框架放在 `shared-demo.css`。

共同 HTML 结构

每个预览页都包含同一组元素：标题、段落、列表、图片、label、input、button 和一个 width: 100% 的盒子。因为结构相同，左侧不重复展示 HTML，只展示会改变这些元素表现的初始化 CSS。

默认间距 Reset 通常清掉 margin；Normalize 倾向保留标题、段落、列表的可读默认。

盒模型 Reset 常统一为 border-box，宽度更符合组件开发直觉。

媒体元素 Reset 常让图片等媒体变成 block 并限制 max-width，避免行内空隙和溢出。

表单控件 Normalize 和现代 reset 都会关注表单控件，但目标分别是兼容修正和组件基线。