Normalize.css是一个优化浏览器默认样式的CSS库，它保留有用样式的同时修复跨浏览器不一致，如标题字号、表单控件外观、small字体问题及pre代码换行；相比归零式CSS Reset，它更智能地统一元素表现；通过CDN、NPM或本地引入，建议在自定义样式前加载；虽不能替代项目级初始化，常需配合box-sizing、字体栈等设置使用。
在网页开发中，不同浏览器对HTML元素的默认样式存在差异。这些差异可能导致页面在Chrome、Firefox、Safari或Edge中显示效果不一致。为了提升跨浏览器的一致性，开发者常使用CSS重置工具，其中 Normalize.css 是最广泛采用的方案之一。
什么是Normalize.css？
Normalize.css 并不是一个彻底清除样式的工具，而是一个让浏览器默认样式更一致的CSS库。它保留有用的默认样式，修复浏览器间的不一致，并确保HTML元素在不同环境中表现统一。
与老式的“CSS Reset”（如Meyer Reset）不同，Normalize.css 不会将所有元素的边距、字体大小等全部归零。它更智能地处理样式差异，比如：
- 修正
h1-h6标题元素在各浏览器中的字号差异 - 统一
button、input、select表单控件的外观 - 修复
small元素在部分浏览
器中字体过小的问题 - 确保
pre和code标签正确换行和样式展示
器中字体过小的问题为什么选择Normalize.css而不是默认样式？
浏览器自带的默认样式表（user agent stylesheet）虽然提供基础排版，但它们不是标准化的。例如：
- Safari 可能给
a链接添加额外的点击高亮 - IE 对
box-sizing的默认处理与其他浏览器不同 - 移动端浏览器对按钮和输入框有特殊渲染规则
Normalize.css 通过一组经过测试的规则，抹平这些差异。它不会让你从零开始设计所有元素样式，而是提供一个稳定、可预测的基础。
如何使用Normalize.css？
引入 Normalize.css 非常简单，可以通过以下几种方式：
-
CDN 引入：在HTML的
中加入： - NPM 安装：项目中运行 npm install normalize.css，然后在入口CSS或JS中导入
- 本地复制：将源码文件下载并放入项目静态资源目录
建议在自定义样式表之前加载 Normalize.css，以确保你的样式可以基于统一的基础进行覆盖。
Normalize.css 的局限性
尽管 Normalize.css 解决了大多数通用问题，但它不能完全替代项目级的样式初始化。你可能仍需补充：
- 设置全局
box-sizing: border-box - 统一字体栈（font-family）
- 清除列表默认样式（如导航菜单）
- 响应式图片设置：
img { max-width: 100%; }
这些通常配合 Normalize.css 一起使用，构成完整的“CSS 初始化”策略。
基本上就这些。Normalize.css 不复杂但容易忽略，却是构建跨浏览器兼容页面的重要一步。
