在 Web 前端开发中，我们经常需要使用列表来展示内容。但是，浏览器对列表的默认样式并不一致，这会导致在页面展示时样式混乱，影响用户的视觉体验。为了解决这个问题，我们需要使用 CSS Reset 来消除默认列表样式。
CSS Reset 是什么？
CSS Reset 是一种消除浏览器默认样式的技术。它通过一系列 CSS 规则去除浏览器的默认样式，以便开发者可以根据自己的需要重新定义元素的样式。
CSS Reset 有很多的选择，比如 Eric Meyer 的重置样式（Eric Meyer's Reset CSS）、Normalize.css 等。这些样式库基本上都是通过给标签添加样式来消除浏览器的默认样式。
在本文中，我们以 Normalize.css 为例，来讲解如何使用 CSS Reset 消除默认列表样式。
使用 Normalize.css 消除默认列表样式
步骤一：下载 Normalize.css 文件
我们首先需要下载 Normalize.css 文件。可以在 GitHub 上下载最新版本的 Normalize.css 文件，或者使用 CDN 加载。
步骤二：引入 Normalize.css 文件
在你的 HTML 文件中，使用 link 标签来引入 Normalize.css 文件。
-- -------------------- ---- -------
--------- -----
------
------
--------- ------------- ----------------
----- ---------------- ---------------------
-------
-- -------- --
--------
-------
------
----
------- ------
------- ------
------- ------
-----
-------
-------步骤三：应用自定义样式
在引入 Normalize.css 文件后，我们可以重新定义列表的样式。以下是一个简单的示例：
-- -------------------- ---- -------
--------- -----
------
------
--------- ------------- ----------------
----- ---------------- ---------------------
-------
-- ----- --
-- -
----------- -----
------------- --
-
-- -
------------- -----
-------------- -----
-
--------
-------
------
----
------- ------
------- ------
------- ------
-----
-------
-------在上面的代码中，我们使用了一些样式来重新定义列表。其中：
list-style: none;属性用于关闭列表项的默认符号。padding-left: 0;属性用于去除列表的默认左侧内边距。padding-left: 10px;属性用于给列表项添加左侧内边距。margin-bottom: 10px;属性用于给每个列表项间添加下边距，增加可读性。
结论
使用 CSS Reset 消除默认列表样式可以帮助我们解决浏览器默认样式不一致的问题，让页面在不同浏览器上显示一致。Normalize.css 是一个常用的样式库，它可以帮助我们快速消除默认列表样式，并且拥有良好的兼容性，值得推荐。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6774db8c6d66e0f9aaf10bf9