在前端开发中，CSS Reset 是一个非常常见的概念。CSS Reset 的作用是将浏览器默认的样式全部重置，让我们更方便地控制样式。例如，ul、ol 等元素在默认情况下会有一些样式，如指定一定的内外边距、加入干扰线等等。这些默认样式会影响我们的布局，因此需要通过 CSS Reset 将其重置。本文将介绍如何使用 CSS Reset 重置 ul、ol 的样式。
CSS Reset 的选择
在进行 CSS Reset 之前，我们需要选择适合我们的 Reset，因为不同的 Reset 可能会影响到我们之前写好的样式。下面介绍两种比较常见的 Reset。
Normalize.css
Normalize.css 是一个非常流行和广泛应用的 Reset 工具。它的特点是保留有用的浏览器默认样式，只针对那些真正需要重置的样式进行重置。因此，使用 Normalize.css 后，我们可以更加高效地开发样式。
Reset.css
Reset.css 是最常见的 Reset 工具之一。它的特点是将浏览器的所有默认样式全部重置，包括元素的内外边距、字体、颜色等等。使用 Reset.css 后，我们需要重新定义所有的样式。
在本文中，我们将使用 Reset.css 进行示例演示。
ul、ol 的默认样式
在使用 Reset.css 之前，我们先来看一下 ul、ol 的默认样式。
-- -------------------- ---- -------
--------- -----
------
------
------------ ------------
-------
------
------ ---------
----
-------- ------
-------- ------
-------- ------
-----
------ ---------
----
-------- ------
-------- ------
-------- ------
-----
-------
-------默认情况下，ul、ol 元素有以下样式：
- 内部元素（即 li 元素）有 40px 左右的内边距和 1em 的 margin-top 和 margin-bottom。
- ol 元素有前缀数字，并加入一些干扰线（如紧凑排版的干扰线）。
- ul 元素使用圆点符号。
使用 Reset.css 重置 ul、ol 样式
我们可以在 CSS 文件中将 ul、ol 元素的样式全部重置。例如：
ul, ol {
margin: 0;
padding: 0;
list-style: none;
}这个示例的作用是：
- 将 ul、ol 元素的 margin 和 padding 重置为 0。
- 将 ul、ol 元素的 list-style 重置为 none，即去掉 ul 元素的圆点符号，去掉 ol 元素的数字前缀和干扰线。
完整示例代码
下面是完整的示例代码，包括 Reset.css 和使用 Reset.css 重置 ul、ol 样式的示例。
-- -------------------- ---- -------
--------- -----
------
------
--------- --- ----- -- ----- ----------
----- ---------------- -----------------
-------
--- -- -
------- --
-------- --
----------- -----
-
--------
-------
------
-------------
----
-------- ------
-------- ------
-------- ------
-----
----
-------- ------
-------- ------
-------- ------
-----
--------------
----
-------- ------
-------- ------
-------- ------
-----
----
-------- ------
-------- ------
-------- ------
-----
-------
-------总结
使用 CSS Reset 重置 ul、ol 样式是前端开发中必备的技能。我们可以选择一种适合自己的 Reset 工具将浏览器默认的样式全部重置，再根据需求重新定义样式，从而实现更高效和具有一致性的样式布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6496c54448841e98943fcac7