Normalize.css是一个现代HTML5兼容的CSS库，用于统一不同浏览器的默认样式。它不重置为零，而是修复浏览器间差异、保留有用默认值（如em、strong的语义样式）、解决常见bug（如旧IE对HTML5元素支持问题），并提升可访问性与一致性。通过CDN引入、包管理器安装（npm/yarn）或本地下载使用，建议先加载Normalize.css再添加自定义样式，避免修改源文件，可结合modern-normalize等工具优化。它解决了HTML5元素识别、排版、表单、列表缩进和表格边框等跨浏览器显示问题，是构建一致前端体验的基础步骤。
不同浏览器对HTML元素的默认样式处理方式各不相同，这可能导致页面在Chrome、Firefox、Safari或Edge中显示效果不一致。为解决这一问题，Normalize.css 是一个广泛使用的CSS库，它不是彻底清除样式，而是让所有浏览器的默认样式保持一致，保留有用的默认值并修复常见bug。
什么是Normalize.css？
Normalize.css 是一个现代、HTML5-ready 的样式重置方案。与传统的“reset CSS”（如Meyer Reset）不同，它不会将所有样式归零，而是：
- 修正浏览器间的默认样式差异
- 保持有用的默认样式（如
em、strong的语义化样式） - 修复常见的浏览器bug（如HTML5元素在旧IE中的显示问题）
- 提升可访问性和一致性
如何引入Normalize.css
有多种方式可以在项目中使用 Normalize.css：
1. 通过CDN引入
在HTML文件的 中添加：
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">2. 使用包管理器安装（推荐）
如果你使用 npm 或 yarn：
npm install normalize.css
然后在你的主CSS文件或JavaScript入口中导入：
@import 'normalize.css';
或在JS中（如React项目）：
import 'normalize.css';3. 下载源码到本地
从 GitHub 下载 https://www.php.cn/link/f831547ec73855ada56ccfd6ee45364d，放入项目css目录，再通过link引入：
<link rel="stylesheet" href="./css/normalize.css">
Normalize.css解决了哪些常见问题？
以下是它处理的一些典型样式统一问题：
-
HTML5元素支持：确保
article、section等新标签在老版本IE中可识别和正确显示 -
排版一致性：统一
body的字体大小、行高和外边距 - 表单元素美化：按钮、输入框在不同系统下表现更接近
-
列表样式统一：修正
ol、ul的缩进差异 -
表格边框处理：设置
table的边框合并方式
使用建议与注意事项
引入 Normalize.css 后，建议按以下方式组织项目样式：
- 先加载 Normalize.css，再写自己的全局样式，避免被覆盖
- 不要修改 Normalize.css 源文件，自定义样式应写在单独的CSS文件中
- 可配合现代CSS重置工具如 Reset CSS 或 modern-normalize（更轻量）
- 注意版本更新，定期检查是否有新修复
基本上就这些。Normalize.css 不复杂但容易忽略，却是构建跨浏览器一致体验的重要第一步。用上它，能让你更专注于设计本身，而不是调试浏览器差异。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
