Normalize.css 是一个现代 CSS 工具库，用于统一不同浏览器的默认样式差异，保留有用默认值并修复显示问题。它通过精细调整实现跨浏览器一致性，而非彻底清除样式，相比传统 CSS Reset 更温和且结构清晰。可通过 CDN、npm 安装或本地引用方式引入，建议在自定义样式前加载。它不处理布局兼容性，需配合其他工具使用，适用于响应式设计。与 CSS Reset 不同，它保留合理默认样式并提供详细注释，提升可维护性，是前端开发的良好实践。
不同浏览器对HTML元素的默认样式存在差异，这会导致网页在不同浏览器中显示效果不一致。Normalize.css 是一个现代、HTML5-ready 的 CSS 工具库，用于让所有浏览器的默认样式保持一致，而不是完全清除它们。它保留有用的默认样式，修复浏览器特有的显示问题，是构建跨浏览器一致体验的良好基础。
什么是 Normalize.css
Normalize.css 不是重置（reset）CSS，它不会将所有样式的默认值设为“0”或统一成某种风格。相反，它通过精细调整，修复浏览器间的不一致行为，比如标题的上下间距、button 和 input 的字体继承、HTML5 元素的默认显示方式等。
相比传统的 CSS Reset（如 Eric Meyer’s Reset），Normalize.css 更加温和且结构清晰，适合现代开发流程。
如何引入 Normalize.css
有多种方式可以将 Normalize.css 集成到项目中，选择最适合你开发方式的一种即可。
立即学习“前端免费学习笔记（深入）”；
1. 通过 CDN 引入
在 HTML 文件的 <head> 标签中添加以下链接：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">2. 使用 npm 安装
如果你使用构建工具（如 Webpack、Vite 等），可以通过 npm 安装：
然后在主 CSS 或 JavaScript 文件中导入：
@import 'normalize.css';或在 JS 中引入（某些框架支持）：
import 'normalize.css';3. 下载源码并本地引用
从 GitHub 下载 Normalize.css 源文件（https://www.php.cn/link/f831547ec73855ada56ccfd6ee45364d），放入项目目录，例如 css/normalize.css，再在 HTML 中引用：
<link rel="stylesheet" href="./css/normalize.css">使用时的注意事项
Normalize.css 只解决默认样式的差异，不会影响你自定义的样式设计。使用时注意以下几点：
- 建议在你自己编写的 CSS 文件之前引入 Normalize.css，确保你的样式能覆盖其设置
- 它不处理 CSS 布局方案（如 Flexbox 或 Grid 的兼容性），需要配合其他工具或前缀处理
- 版本更新时注意查看变更日志，避免升级后出现意料之外的样式变化
- 移动端和桌面端都适用，对响应式设计无负面影响
与 CSS Reset 的区别
很多人容易混淆 Normalize.css 和 CSS Reset。主要区别在于理念：
- CSS Reset 目标是消除所有默认样式，让所有元素“从零开始”
- Normalize.css 目标是让默认样式在各浏览器中表现一致，保留合理的默认值（如 h1 比 h2 大）
- Normalize.css 提供详细注释，便于理解每条规则的作用
因此，Normalize.css 更适合现代开发，减少重复定义，提升可维护性。
基本上就这些。引入 Normalize.css 是前端开发中的良好实践，尤其适合团队协作和长期维护的项目。它小巧、稳定、有效，帮你打好样式基础，专注业务逻辑和视觉设计。
