在进行网页开发时，我们会发现在不同的浏览器和操作系统中，相同的样式在展示效果上差别很大。这是因为不同的浏览器和操作系统对网页的默认样式有不同的处理方式，这就给我们开发带来了很多的困扰。为了解决这个问题，我们通常会选择重置（Reset）默认样式。
这篇文章将会介绍什么是 CSS Reset，如何使用 CSS Reset，以及一些常见的 CSS Reset 库。
什么是 CSS Reset？
CSS Reset 的主要作用是重置浏览器的默认样式，以避免在不同浏览器和操作系统中出现不一致的问题。它不是一味地将所有样式都清空，而是通过将 HTML 元素的默认样式设置为相同的值，从而消除样式之间的影响。因此，使用 CSS Reset 能够保证网页在不同浏览器和操作系统中保持相同的展示效果，并减少样式之间的冲突。
如何使用 CSS Reset？
使用 CSS Reset 很简单，只需要在 HTML 页面头部的 <head> 标签中引用 Reset 样式表即可。以下是一个简单的示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- -------------
----- ---------------- -----------------
----- ---------------- -----------------
-------
------
---------- -----------
-------
-------在上面的示例中，我们通过 <link> 标签将 Reset 样式表和自己的样式表分别引用，并将 Reset 样式表放在自己的样式表之前，这样可以保证在样式解析时先读取 Reset 样式表。
常见的 CSS Reset 库
以下是一些常见的 CSS Reset 库。其中，Normalize.css 是一款非常流行的 CSS Reset 库，它不同于其它的 CSS Reset 库，它的目的是让不同浏览器之间的默认样式尽可能的一致，而不是完全重置浏览器的样式。
Reset CSS
Reset CSS 是最早的 CSS Reset 库之一，它尝试将 HTML 元素的默认样式设置为相同的值，从而消除样式之间的影响。 Reset CSS 的样式表非常简单，只包含基本的标签样式，因此可以很容易地修改和自定义。
-- -------------------- ---- ------- ---- - ---------- ----- ------------------------- ----- --------------------- ----- ----------------------- ------------ ------------------------ ---------- ---------------------------- ------- -- -- --- - ---- - ------- -- -------- -- - -------- ------ -------- ----------- ------- ------- ------- ------- ---- ------- - -------- ------ - ------ ------- --------- ----- - -------- ------------- ------------- ----- - -------------- - --------- ------- - ------- ------ ------- -------- - ------- -- - ------ - ----------------- ------------ ------- ----- - ----- - ------- ----- - ------- -------- - ------- ----- - - - ------ -------- ---------------- ----- - ----- - ---------------- --------- --------------- -- - --- - ------------- ----- --------------- ------- -
Normalize.css
Normalize.css 着重于让不同浏览器之间的默认样式尽可能的一致，而不是完全重置浏览器的样式。它主要分为两种 style：
第一种 style：
-- -------------------- ---- -------
--
-- -------- ----------- ------------
-- -------
--
---- -
------------ -----
------------------------- -----
-
---- -
------- --
-
---- -
-------- ------
-
-- -
---------- ----
------- ------ --
-
-- -
----------- ------------
------- --
--------- --------
-
--- -
------------ ---------- ----------
---------- ----
-
- -
----------------- ------------
-
----------- -
-------------- -----
---------------- ----------
------------------------ --------- -------
---------------- --------- -------
-
--
------ -
------------ -------
-
-----
----
---- -
------------ ---------- ----------
---------- ----
-
----- -
---------- ----
-
----
--- -
---------- ----
------------ --
--------- ---------
--------------- ---------
-
--- -
------- --------
-
--- -
---- -------
-
--- -
------------- -----
--------------- -------
-
-------
------
---------
-------
-------- -
------------ --------
---------- -----
------------ -----
------- --
-
-------
----- -
--------- --------
-
-------
------ -
--------------- -----
-
------ -
------------------- -------
-
-------- -
--------- -----
-
------
-------
------
-------
-------- -
------- --------
---------- ----
-
----- -
---------------- ---------
-
------- -
----------- -----
-
-------- -
-------- ------ ------ --------
-
------ -
----------- -----------
------ --------
-------- ------
---------- -----
-------- --
------------ -------
-
-------- -
--------------- ---------
-
-------- -
------- ---------
-
------------------
-------------- -
----------- -----------
-------- --
-
-------------------------------------------
------------------------------------------ -
------- -----
-
--------------- -
------------------- ----------
--------------- -----
-
------------------------------------------ -
------------------- -----
-
---------------------------- -
------------------- -------
----- --------
-
------- -
-------- ------
-
------- -
-------- ----------
-
-------- -
-------- -----
-
-------- -
-------- -----
-第二种 style 则对于所有元素的样式进行调整。例如，统一所有 reset 的元素的 margin 和 padding，以及去除默认的 list-style。
-- -------------------- ---- ------- -- ----- --- --- -------- -- ---- - ----------- ----------- ------------ ----------- - -- --------- ------- - ----------- -------- - ---------- --------- - -------- -- - -------------- ------------ ----------- ---------- --------- - ----------- ----- - ----------- ----------- - - ------- ----- - ------------------- ------------------ ---------- -------- - -------- --- -------- ----- - ----- - ---------------- --------- --------------- -- - -- - ------------ ----- - --- -- - ----------- ----- --------------- ---- -
总结
CSS Reset 是为了解决不同浏览器和操作系统之间的展示效果差异问题而产生的一种技术手段。通过重置 HTML 元素的默认样式，消除样式之间的影响，从而达到保证网页在不同浏览器和操作系统中保持相同的展示效果，并减少样式之间的冲突的目的。
以上介绍了 CSS Reset 的概念、作用，以及常见的 CSS Reset 库，除此之外我们还可以自己编写自己的 Reset 风格，以满足自身的要求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646436cc968c7c53b0518815