在进行前端开发过程中，常常会遇到 CSS 样式出现异常的情况，这通常是因为不同浏览器对 CSS 解析的方式不同，导致样式的一些元素表现出现偏差。为了避免这些问题的出现，我们需要使用 CSS Reset 工具。
CSS Reset 简介
CSS Reset 顾名思义就是 “重置 CSS 样式”。而为什么需要重置呢？主要原因是每个浏览器都自带一些默认的样式，这些样式可能在不同浏览器中不尽相同，导致页面显示不一致。因此，我们需要对这些默认样式进行一些处理，使得基础样式在不同浏览器中显示相同。而 CSS Reset 工具就是解决这样的问题。
常见的 CSS Reset 方法
1. HTML5 Reset
HTML5 Reset 是一款基于 HTML5 的 CSS Reset 工具，它是由开发者 Nicolas Gallagher 创作的一个开源项目。和其他 Reset 工具一样，HTML5 Reset 希望确保在不同的浏览器平台上得到一致的显示效果。
HTML5 Reset 声明了一些规则，这些规则在所有浏览器中得到一致的支持。使用 HTML5 Reset 的过程，需要在每个页面中指定使用 HTML5 Reset 的 CSS 文件。
示例代码如下：
--------- -----
----- ----------
------
----- ----------------
------------ -------------
----- ---------------- ----------------------
-------
------
---- ------ ---
-------
-------2. Normalize.css
Normalize.css 是另一个基于 CSS Reset 的工具，它可以重置各种浏览器中的元素样式。Normalize.css 的特点是注重兼容性和风格的一致性。除了还原常规的 HTML 元素样式，Normalize.css 还将许多新的 HTML5 元素的样式进行了添加。
示例代码如下：
--------- -----
----- ----------
------
----- ----------------
----------------------------
----- ---------------- ---------------------
-------
------
---- ------ ---
-------
-------CSS Reset 框架化实现
在实际开发中，还可以将 CSS Reset 做成一个框架，以方便使用。下面我们来介绍一下如何实现：
- 建立一个 CSS Reset 的框架目录结构，如下：
- ------
- -------------
- --------------将所需的 Reset 工具文件放到对应的目录下：将 Normalize.css 和 HTML5 Reset 下载后，放到 reset 目录下即可。
在 reset 目录下新建 index.css 文件，用于控制 Reset 效果和样式风格。
示例代码如下：
--
- ----- ------ -- -----
--
-- -------------- --
--
- --- ------ ------ -----
--
----- ---- -
------- -----
------- --
-------- --
---------- -----
------------ ------ -----------
-
--- --- --- --- --- -- -
------------ -------
-
- -
---------------- -----
------ -----
-
-- ------------- --在页面中引入 Reset 框架文件即可，如下：
--------- -----
----- ----------
------
----- ----------------
---------- ----- -----------------
----- ---------------- -----------------------
-------
------
---- ------ ---
-------
-------总结
通过使用 CSS Reset 工具，可以确保样式在不同浏览器中显示一致，并避免因浏览器默认样式差异所带来的问题。常见的 Reset 工具包括 HTML5 Reset 和 Normalize.css，我们也可以将其框架化实现，进行更方便地使用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64f86f07f6b2d6eab307af65