在开发网页时，我们经常会遇到浏览器默认样式之类的问题，这时候我们通常需要使用 CSS Reset 来清除默认样式。CSS Reset 是一种规避浏览器默认样式的方法，并能使各个浏览器对页面元素呈现更一致的样式，避免了浏览器样式兼容性的问题，而且可以使用户界面更加美观。
CSS Reset 方法
CSS Reset 的方法主要有两种。一是使用现成的 CSS Reset 文件并引入，二是手动编写样式清除浏览器默认样式。
引入 CSS Reset 文件
引入 CSS Reset 文件通常有现成的文件，也有有关的 npm 包。在这里，我们使用现成的文件作为例子，如下：
<!-- 引入现成的 CSS Reset 文件 --> <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="style.css">
这里 “reset.css” 文件就是一个比较常见的 CSS Reset 文件，它故意把页面元素的默认样式清空，使网页元素更容易获得相同的显示效果，达到浏览器兼容性的目的。
手动编写样式清除浏览器默认样式
手动编写样式清除浏览器默认样式是对一些浏览器默认样式的重置，下面是代码写法：
-- -------------------- ---- ------- -- ---------- -- - - ------- -- -------- -- ----------- ----------- - -- -- -- - -- ----- -- --- -- - ----------- ----- - -- --------- -- --- - ------- -- ------- ----- ---------- ----- --------------- ------- -
手动编写样式清除浏览器默认样式的优点是我们完全可以根据需求来定义需要重置与清除的样式。比如有些项目使用了 Bootstrap，它本身就解决了一些常见的样式兼容性问题，因此不需要使用完整的 CSS Reset。
CSS Reset 的效果
CSS Reset 的效果主要是重置和清空浏览器的默认样式。比如默认的 h1 标题在每个浏览器中可能会稍有不同，使用 CSS Reset 时，它们的样式将更加统一、美观。
在操作重置前，我们可以使用浏览器检查工具检查元素的默认样式。如下是一个列表样式的默认样式截图：
在应用 CSS Reset 后，展示的列表不再出现带格式的圆点，因为指定了它们的 list-style 属性为 none：
ul,
ol {
list-style: none;
}
由于 CSS Reset 是清除浏览器默认样式，因此所有的元素都将失去默认样式。这意味着您需要为您的每个元素重新定义样式。在实际操作中，有时我们会使用一些框架和库，它们已经定义了常见的元素样式，所以您要仔细考虑是否需要将 CSS Reset 用于自己的项目。
示例代码
为使本文更具实用性，这里提供一段示例代码：
-- -------------------- ---- ------- -- ------ -- - - ----------- ----------- ------- -- -------- -- - -- ---- -- ------------------ ---------------- - ------ ----- -------- --- -------- ------ - --- -- - ----------- ----- - -- -------- -- - - ------ -------- ------- -------- ---------------- ----- - -- ----------- -- ------- - -------- ----- ------------ -------- - -- --------- -- --- - -------- ------ ------ ----- ------- ----- ------- -- -
结论
总的来说，CSS Reset 是非常有用的方法，因为它可以解决浏览器默认样式导致页面兼容性问题，并提高用户体验。如果您不使用某个用于 UI 的库或框架，则可以使用 CSS Reset 重置默认值，然后再为每个元素设定自定义样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676e42a953d5693f074859da