css如何使用Normalize.css统一浏览器样式_解决浏览器默认样式差异

Normalize.css 不会清空默认样式，只修正跨浏览器不一致问题；需作为首个样式表引入，避免被覆盖或截断，配合 base.css 使用而非混用其他 reset。

为什么直接引入 Normalize.css 后样式没变化？

Normalize.css 不是重置（reset），它不会把 margin、padding 全设为 0，而是保留有用的默认行为（比如标题的 font-weight、列表的缩进），只修正跨浏览器不一致的地方。如果你期望“清空所有默认样式”，它达不到效果；但如果你想要语义化标签在 chrome/firefox/safari/edge 中表现一致，它正合适。

常见误操作：

• 把 Normalize.css 放在自定义 CSS 之后 —— 导致你的规则覆盖了它的修复逻辑
• 用 @import 在 scss 中引入，却忘了它必须是第一个加载的 CSS 文件
• 只复制了部分代码（比如删掉了表单控件或 html5 元素的规则），破坏了完整性

如何正确加载 Normalize.css 到项目中？

最稳妥的方式是确保它作为**首个外部样式表**载入，早于任何自定义 CSS：

如果是构建流程（webpack/vite）：

立即学习“前端免费学习笔记（深入）”；

• Vite 项目：在 main.js 或 main.ts 最顶部加 import 'normalize.css'
• Webpack + style-loader：确保 normalize.css 的 import 出现在所有其他 CSS import 之前
• 不要用 @import url(...) 写在 SCSS 文件里 —— 它的优先级和加载时机不可控

哪些样式差异是 Normalize.css 真正解决的？

它重点处理的是那些「不显眼但导致布局错位」的问题，例如：

• button、input[type="button"] 在 Safari 和 Firefox 中的默认 font-family 和 line-height 不同
• textarea 的 resize 行为和垂直对齐方式在旧版 Edge 中异常
• h1–h6 在 IE 和 Chrome 中的 margin-bottom 差异（Normalize 统一设为 0.67em）
• audio、video、progress 等新元素在部分浏览器中无默认样式，Normalize 补上基础 display 和尺寸

它不会动 body 的 margin，也不会清空 p 的上下间距 —— 那些属于你自己的 reset 或设计系统职责。

要不要配合 reset 或自定义基础样式？

要，但别混用。Normalize.css 是“保底兼容层”，不是最终视觉方案。典型做法是：

• 先加载 Normalize.css（修复差异）
• 再加载一个极简的 base.css，统一 box-sizing、设置 *, *::before, *::after 为 border-box，定义 body 字体和行高
• 避免使用 eric meyer reset 或 modern-normalize 同时存在 —— 规则冲突会导致调试困难

特别注意：Normalize.css 对 Web Components（如 Shadow dom）无作用，自定义元素内部仍需单独处理默认样式。