在前端开发中，为了让网页在不同的浏览器中有相同的表现效果，常常会使用 CSS Reset。但是，很多开发者都发现 CSS Reset 存在一些问题，比如可能会不必要地覆盖浏览器原生的样式、增加工作量等。因此，近年来一个叫做 normalize.css 的 CSS 文件被越来越多的前端开发者采用来代替 CSS Reset。
normalize.css 是什么？
normalize.css 是一份由 Nicolas Gallagher 和 Jonathan Neal 联合开发的 CSS 文件，其目的是让不同的浏览器在默认情况下展现出一致且合理的样式效果。normalize.css 通过使用现代的浏览器技术针对 HTML5 元素、排版、列表、表格、空格等元素的样式进行了优化，而不是像 CSS Reset 那样直接清除所有的样式，从而达到更好的兼容和性能。
如何使用 normalize.css？
使用 normalize.css 非常简单，只需要将其文件引入到你的 HTML 文件中即可。你可以在 normalize.css 的官网（https://necolas.github.io/normalize.css/）上下载最新版本，也可以使用 CDN 引入：
<head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css" /> </head>
normalize.css 的优点
1. 更好的兼容性
normalize.css 使用了现代的浏览器技术来规范化元素的样式，因此可以更好地处理不同浏览器之间的兼容性问题，减少兼容性调试的工作量。
2. 更合理的样式规范
normalize.css 相较于 CSS Reset 更注重样式规范，对于许多 HTML5 新增的元素和属性也进行了兼容处理。
3. 减少重写样式的工作
使用 normalize.css 后很多常见的样式都已经被优化和规范化了，减少了重新写样式的工作量，更加高效。
normalize.css 的不足之处
虽然 normalize.css 是一份很不错的 CSS 文件，但也存在一些缺点：
1. 兼容性问题
normalize.css 也不能完全保证在所有浏览器中都能够完美展现，但是相较于 CSS Reset，其已经达到了非常优秀的兼容性。
2. 可能增加了页面加载时间
使用 normalize.css 会增加页面文件的大小，可能导致页面加载时间相应增加，但是对于大部分网站来说影响并不大。
总结
normalize.css 是一份非常优秀的 CSS 文件，相较于 CSS Reset 具有更好的兼容性和规范化特性，但也并非完美无缺。在选择使用时，需要根据项目具体的情况进行评估和决策。
示例代码：
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css" />
<style>
/* 可以在这里添加自定义样式 */
</style>
</head>来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6481d4a648841e989414cdc8