在前端开发中，我们常常需要使用 CSS Reset 来消除浏览器默认样式的影响，以便更好地实现自己的设计效果。今天我们要介绍的是一款实用的免费 CSS Reset，它的名字叫做 Normalize.css。
什么是 Normalize.css？
Normalize.css 是一个开源的 CSS Reset 库，它的目标是消除浏览器默认样式的差异，并保持尽可能的一致性。与传统的 CSS Reset 不同，Normalize.css 不会完全清除所有的样式，而是保留了一些有用的默认样式，以便于开发者更加方便地实现自己的设计效果。
如何使用 Normalize.css？
使用 Normalize.css 非常简单，你只需要在你的 HTML 文件中引入它的 CSS 文件即可：
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/latest/normalize.css">
注意，这里我们使用的是 Normalize.css 的官方 CDN，你也可以将它下载到本地使用。
Normalize.css 的基本样式
下面我们来看一下 Normalize.css 的一些基本样式。
1. 标题样式
Normalize.css 保留了浏览器默认样式中标题的样式，但对它们进行了微调，使得它们更加一致：
-- -------------------- ---- ------- -- - ---------- ---- ------- ------ -- - -- - ---------- ------ ------- ------ -- - -- - ---------- ------- ------- --- -- - -- - ---------- ---- ------- ------ -- - -- - ---------- ------- ------- ------ -- - -- - ---------- ------- ------- ------ -- -
2. 表单样式
Normalize.css 对表单元素的样式进行了微调，使得它们更加一致：
-- -------------------- ---- ------- ------- ------ --------- ------- -------- - ------------ -------- ---------- ----- ------- -- - ------- ----- - ------------ ------- - ------- ------ - --------------- ----- - ------- ---- --------------------- -------------------- -------------------- - ------------------- ------- ------- -------- - ----------------------- ------------------- - ----------- ----------- -------- -- - -------------------- - ------------------- ---------- ----------- ------------ - --------------------------------------------------- ----------------------------------------------- - ------------------- ----- -
3. 图像样式
Normalize.css 对图像的样式进行了微调，使得它们更加一致：
img {
border-style: none;
max-width: 100%;
}4. 列表样式
Normalize.css 对列表的样式进行了微调，使得它们更加一致：
ol,
ul {
list-style: none;
margin: 0;
padding: 0;
}5. 段落样式
Normalize.css 对段落的样式进行了微调，使得它们更加一致：
p {
margin: 0;
}总结
Normalize.css 是一款实用的免费 CSS Reset，它保留了一些有用的默认样式，使得开发者更加方便地实现自己的设计效果。我们可以通过官方 CDN 或者下载到本地来使用它。在使用 Normalize.css 的过程中，我们还需要了解它的基本样式，以便更好地应用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/662a5e00d3423812e47c42e7