在前端开发中，我们往往需要在不同的浏览器中兼容网页样式。不同浏览器对默认样式的定义是不同的，这就会导致同一个网页在不同浏览器中呈现出不同的效果。为了标准化网页样式，我们可以使用 CSS Reset。
CSS Reset 的作用是清除浏览器默认样式，从而创建更加统一的网页样式。CSS Reset 可以清除各个元素的 margin、padding、font-size、line-height、border 等默认属性，使得各个元素在不同浏览器中呈现出相同的效果。
如何使用 CSS Reset
- 下载 CSS Reset 文件
首先，我们需要下载 CSS Reset 文件。有很多 CSS Reset 文件可供选择，如 Eric Mayer's Reset CSS、Normalize.css 等。在这篇文章中，我们以 Normalize.css 为例。
- 引入 CSS Reset 文件
下载完 CSS Reset 文件后，我们需要在网页中将其引入。可以使用 link 标签将 CSS 文件引入到 head 标签中：
-- -------------------- ---- -------
--------- -----
------
------
----- ---------------- ---------------------
-------
------
---
-------
-------这样，CSS Reset 就被成功地引入到网页中了。
CSS Reset 的效果
下面我们来看一下 CSS Reset 能够做到什么。
在默认情况下，各个浏览器对于某些元素的默认样式是不同的。例如，对于 ul 和 ol 元素，Firefox 的默认样式为：
ul, ol {
padding-left: 40px;
}而 Chrome 的默认样式为：
ul, ol {
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}这就导致了同一个网页在不同浏览器中 ul 和 ol 元素呈现出不同的样式，如下图所示：
有了 CSS Reset，我们可以清除这些默认样式，从而使得 ul 和 ol 元素在不同浏览器中呈现出相同的样式。下面是应用 Normalize.css 后 ul 和 ol 元素的样式：
我们可以看到，应用 CSS Reset 后 ul 和 ol 元素在不同浏览器中呈现出了相同的样式。
使用自定义样式
在应用 CSS Reset 后，我们可能需要为网页设置自定义样式。为了避免在应用自定义样式时重新定义一些基本样式，我们可以按照一定规则来进行自定义样式的定义。
一般来说，我们可以采用“覆盖”、“新增”、“扩展”的方式来定义自定义样式。
- 覆盖：覆盖 CSS Reset 中的基本样式。例如，我们可以通过以下代码来将所有 h1 元素的字体设置为 Arial：
h1 {
font-family: Arial;
}- 新增：新增一些没有被 CSS Reset 覆盖的样式。例如，如果我们需要为某个元素添加一个背景色，则可以这样定义：
.my-element {
background-color: #f0f0f0;
}- 扩展：在 CSS Reset 的基础上进行样式扩展。例如，如果我们需要对某个元素设置一个 padding，则可以这样定义：
.my-element {
padding: 10px; /* 扩展 Reset 中的 padding 样式 */
}使用这些方式定义自定义样式，可以在保证网页样式统一的前提下，为不同元素添加不同的样式。
总结
CSS Reset 是一种使网页样式统一的方法，它可以清除浏览器默认样式，使得各个元素在不同浏览器中呈现出相同的效果。使用 CSS Reset 的步骤很简单，只需要下载 CSS Reset 文件并将其引入到网页中即可。
在应用 CSS Reset 后，我们需要为网页设置自定义样式。为了避免在应用自定义样式时重新定义一些基本样式，我们可以按照一定规则来进行自定义样式的定义。一般来说，我们可以采用“覆盖”、“新增”、“扩展”的方式来定义自定义样式。
在实际开发中，我们可以选择不同的 CSS Reset 文件，也可以根据需求自己编写 CSS Reset。使用 CSS Reset 可以使网页样式更加统一、更加美观，值得我们在实际开发中使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648cdba548841e9894b2afae