normalize.css 更适合作为现代项目的基底，它统一跨浏览器差异并保留有用默认样式；reset.css 则彻底清零样式，适合强定制化项目；二者均需在框架 CSS 之前加载，并配合 base.css 和框架变量进行可控微调。
引入 CSS 框架（如 Bootstrap、Tailwind、Element Plus）后出现样式冲突，本质是不同来源的 CSS 规则对同一元素设置了不一致的默认值或优先级更高的样式。解决核心不是“禁用框架样式”，而是建立可控、可预测的基础样式环境。reset.css 和 normalize.css 是两种主流方案，但它们目标不同，适用场景也不同。
理解 reset.css 和 normalize.css 的区别
reset.css 的思路是“清零”：移除所有浏览器默认的外边距、内边距、字体、列表样式等，让所有元素从视觉上“归零”，再由你完全重新定义。它适合需要极致自控、从头搭建设计系统的项目，但容易导致按钮、表单、标题等基础元素失去可访问性或语义表现。
normalize.css 的思路是“统一”：保留有用的浏览器默认样式（比如 heading 的 font-weight、button 的 cursor、input 的 focus outline），同时修复跨浏览器差异（如 Firefox 和 Chrome 对 audio 元素的默认高度处理），让各浏览器呈现更一致、更符合现代标准的行为。它是大多数项目的推荐起点。
正确引入方式：顺序和范围很重要
无论选哪一种，都必须确保它在所有其他 CSS（包括框架样式）之前加载：
立即学习“前端免费学习笔记（深入）”；
- 在 HTML 中，
<link>标签需置于框架 CSS 文件之前； - 在构建工具（如 Webpack/Vite）中，确保 reset/normalize 的 import 出现在框架 import 之前；
- 避免在组件 scoped style 或局部样式中覆盖全局重置逻辑，否则会失效。
配合框架做针对性微调
即使用了 normalize.css，框架仍可能覆盖部分基础样式（例如 Bootstrap 重设了 body 的 margin 和 font-size）。这时不要硬改框架源码，而是通过以下方式收口：
- 在重置文件之后、框架之前，加一层
base.css，只覆盖关键锚点：如*, *::before, *::after { box-sizing: border-box; }、img { max-width: 100%; height: auto; }； - 利用框架提供的自定义变量（如 Bootstrap 的 Sass 变量、Tailwind 的
theme.extend）调整基础尺寸、颜色、间距，而非写大量覆盖规则； - 对个别冲突元素（如第三方 UI 组件中的
h1显示过大），用更具体的类名或属性选择器精准覆盖，避免全局污染。
调试技巧：快速定位冲突来源
在浏览器开发者工具中：
- 选中元素，看 Styles 面板右侧的“Computed”标签页，确认最终生效的
margin、font-family等来自哪个文件； - 点击某条样式旁的文件名链接，跳转到源头，观察是否被 reset/normalize 覆盖，还是被框架或业务 CSS 覆盖；
- 临时禁用某条规则（勾选框取消），验证是否为冲突根源，再决定是调整引入顺序、修改选择器权重，还是重构局部样式。
normalize.css 更适合作为现代项目的基底，reset.css 适合强定制化需求。关键是把基础样式层“管住”，再让框架和业务样式在其之上有序叠加。不复杂但容易忽略。
