当我们开始创建一个网站或应用程序时，我们通常会使用 CSS 构建用户界面。但是，由于不同的浏览器和操作系统之间存在很多差异，从而导致同一份代码在不同的环境中实现不一致。为了解决这个问题，开发人员一直在努力创建所谓的“CSS Reset”来归一化不同浏览器的样式。这就是“normalize.css”所做的事情。
什么是 normalize.css？
normalize.css 是一份开源的 CSS 文件，旨在使浏览器样式更一致和规范化。它解决了不同浏览器之间存在的大量差异，包括样式、行高、字体大小、列表缩进等等。normalize.css 的目标是重置默认样式，以便所有浏览器都以同一规范显示页面。同时，它还附加了一些可用的扩展样式，以便开发人员可以根据自己的需要进行定制。
normalize.css 与传统的 CSS Reset 不同，后者只是将所有元素的样式归零或设置为特定值。相比之下，normalize.css 在解决默认样式问题的同时，还保留了一些本来就应该存在的样式，以便开发人员可以更加轻松地开始设计。这样，即使不同浏览器之间的渲染存在一些微妙的差异，开发人员也可以少些一些反复调试的工作。
如何使用 normalize.css？
使用 normalize.css 很简单，只需要在你的项目中引入该文件，然后在你的 CSS 文件中进行相应的调用即可。你可以选择有两种方法进行调用。
直接将 normalize.css 引入项目：
<link rel="stylesheet" href="./normalize.css">
使用 NPM 安装 normalize.css
npm install normalize.css --save
使用时，可以引入 normalize.css 的 Node.js 模块：
// ES6
import "normalize.css";
// CommonJS
require("normalize.css");normalize.css 的示例代码
下面是 normalize.css 的一部分样式，帮助你更好地了解这个库是如何影响浏览器样式的。
// javascriptcn.com 代码示例
/* 直接将 normalize.css 引入项目时，媒体查询是内嵌到文件中的 */
@media screen {
/* 使用盒子模型 */
/* IE6/7: 不需要使用 !important，因为他们不支持其他盒子模型 */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* 让所有元素的 margin 和 padding 归零 */
/* IE6/7: 限制 margin 提升，在 <html> 元素内限制 padding 提升 */
html {
margin: 0;
padding: 0;
}
/* 设置 body 的字体大小和行高 */
body {
font-size: 16px;
line-height: 1.5;
}
/* 为 <abbr> 元素定义“title”属性 */
abbr[title] {
border-bottom: none;
text-decoration: underline dotted;
}
……（省略部分代码）
}总结
始终保持一致的浏览器样式是一个很难的问题，但是通过使用 normalize.css，可以使开发人员轻松地归一化不同浏览器的样式。normalize.css 内置的默认样式规范了不同浏览器之间的常见样式差异，而且它的开源风格也允许开发人员根据自己的需要进行个性化修改。这个库是前端开发的必备工具，值得我们去学习使用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6538cb497d4982a6eb1dd849