CSS Reset 和 Normalize.css 有什么区别？项目里怎么选？
简化版
CSS Reset 倾向于把浏览器默认样式清空，Normalize.css 倾向于保留有用默认样式并修正浏览器差异。项目选择看设计系统成熟度：强设计系统常用 reset 或现代 reset，内容型页面更适合 normalize 或轻量基础样式。
详细版
- 浏览器默认样式不完全一致，会影响 margin、字体、表单控件和标题表现。
- Reset 的思路是先清零，再由项目样式完整接管。
- Normalize 的思路是保留合理默认值，同时修复跨浏览器差异。
- 现代项目常用更温和的 reset，例如 box-sizing、媒体元素、表单字体继承。
- 无论选哪种，都应在全局样式入口固定，避免组件私自覆盖基础规则。
完整版教学
易错点：reset 不是越狠越专业，基础样式要服务于项目设计和可维护性。
一、这题真正考什么
易错点：reset 不是越狠越专业，基础样式要服务于项目设计和可维护性。
面试官不是只想听定义，而是想看你能不能把 CSS 规则、浏览器渲染、工程维护和用户体验连起来。回答这类题时，先讲机制，再讲例子，最后讲排查方法和边界。
二、底层机制怎么理解
HTML 元素天然带有用户代理样式表，例如 body margin、h1 字号、button 字体、列表缩进。不同浏览器默认值不完全相同，所以前端工程会在项目入口统一基础样式。Reset 和 Normalize 的分歧在于是否保留这些默认语义表现。
CSS 面试题的关键通常在“规则为什么这样生效”。只要能讲清浏览器按什么顺序匹配、计算、布局和绘制，就不会停留在背属性名的层面。
三、带数字的小推演
如果团队设计稿规定所有字号、间距、标题、列表都由组件库控制，清除默认 margin 能减少意外；如果是文章站，完全清掉 h1、ul、blockquote 默认样式会让内容排版成本上升。
下面把判断过程压成几条可复用规则，面试时可以直接照这个顺序推：
项目基础样式 = 浏览器默认样式 + reset/normalize + 设计系统 token
强组件库项目：更偏 reset
内容型或渐进增强项目：更偏 normalize四、浏览器处理流程
可以把它放进浏览器处理链路里看：
浏览器 User Agent 样式
|
项目 reset 或 normalize
|
全局设计令牌
|
组件样式
|
页面局部样式
|
最终 computed style流程图能帮你避免两个常见问题：一是把 CSS 属性当成孤立开关，二是忽略父级、上下文和渲染阶段的影响。真正排查线上样式问题时，沿流程定位通常比随机改 CSS 更快。
五、对比表格
| 方案 | 核心思想 | 适合场景 |
|---|---|---|
| CSS Reset | 清空默认样式 | 强 UI 规范、组件库 |
| Normalize.css | 统一并保留合理默认 | 内容站、传统网页 |
| Modern Reset | 只修关键痛点 | 现代应用通用起点 |
| 不处理 | 依赖浏览器默认 | 小 demo，生产风险高 |
对比题不要只背结论，要主动补一句“适合什么场景”。CSS 的很多选择没有绝对优劣，只有是否符合布局、可维护性、性能和可访问性目标。
六、工程实践和排查思路
- 粗暴清除 outline 会破坏键盘可访问性，必须提供替代 focus 样式。
- 全局 reset 影响面大，修改时要回归表单、富文本和第三方组件。
- 使用 DevTools 时要同时看 matched rules、computed style、layout、accessibility 和 event listeners，避免只盯着源码。
- 组件库项目要把这类规则沉淀成 token、基础样式或 lint 约束，否则同类问题会反复出现。
七、常见误区与追问
- 误区：Reset 和 Normalize 是同一种东西。 需要补上浏览器机制、适用条件和反例，避免把经验口诀当成规则本身。
- 误区：全局写
* { margin: 0; padding: 0; }就完成了 reset。 需要补上浏览器机制、适用条件和反例，避免把经验口诀当成规则本身。 - 误区：清掉所有默认样式一定更可控。 需要补上浏览器机制、适用条件和反例，避免把经验口诀当成规则本身。
- 追问：为什么要给所有元素设置 box-sizing？ 先给判断标准，再结合代码、浏览器行为和工程约束说明取舍。
- 追问：表单控件为什么常需要基础样式统一？ 先给判断标准，再结合代码、浏览器行为和工程约束说明取舍。
- 追问：如何避免 reset 破坏可访问性？ 先给判断标准，再结合代码、浏览器行为和工程约束说明取舍。
八、加强记忆
Reset 是“清场重建”，Normalize 是“校准保留”。选择时先看项目是不是由设计系统完全接管，再决定基础样式要清到什么程度。
复习 HTML/CSS 高频题时，可以固定按“定义、触发条件、浏览器流程、代码例子、工程风险、排查工具”六步组织答案。这样不会只停留在背概念，也更像真实前端开发者。