在前端开发中，CSS的重要性不言而喻。但是，每个浏览器都有其自己的默认样式，这往往会导致开发者的样式不一致，因此有了 CSS Reset。
什么是 CSS Reset?
CSS Reset的主要目的是在不同的浏览器中统一各元素的默认外观（也被称为“User Agent Style Sheets”），同时在不同的浏览器中达成一致的外观效果。通过在 CSS 中重置或覆盖默认样式，可以避免浏览器默认的样式对样式的干扰，使开发者能够更加自由地控制和修改样式。
CSS Reset 的历史
在很长一段时间中，网站开发者使用的 CSS Reset 的基础都是 Eric Meyer 的“Reset CSS”，该方案是将每个元素的所有属性重置为0，以达到在所有浏览器上相同的样式外观。随着 HTML5 和语义化的出现，开发者们逐渐发现，使用"Reset CSS"反而会增加开发成本，因为它将元素的语义化都视为相同的，并且将必要的元素属性进行了删除，这不利于SEO和移动设备优化。
随着 CSS处理的逐渐完善，崭新的 CSS Reset 方案也随之诞生。例如，Normalize.css 和 Reset.css，两个 Reset CSS 常用方案，这些方案重视保留浏览器默认样式中的有用部分，并在不同浏览器上达成一致效果。
Reset.css 示例代码
Reset.css 可以使用下面这个示例代码，它是一种常见的重置 CSS：
-- -------------------- ---- -------
----------------------------------------
-----------------------------------
-------------------------------------
--------------------------------
-----------------------------------
-------------
------------------
---------------------------
---------------------------------------- -
------- --
-------- --
------- --
-------- --
------------ --------
----------- --------
---------- -----
------------ --------
--------------- ---------
-
-- --------- --
- -----------------------Normalize.css 示例代码
Normalize.css 更好的示例代码，它是一种常见的归一化 CSS：
-- -------------------- ---- -------
----------------------------------------
------------------------------------- -
-------- ------
-
------------------ -
-------- -------------
-
--------------------- -
-------- -----
------- --
-
-------- -
-------- -----
-
---- -
------------ -----------
------------------------- -----
----------------- -----
---------------------------- ------------
-
---- -
------- --
-
- -
----------------- ------------
-
---------------- -
-------- --
-
----------- -
-------------- -----
---------------- ----------
------------------------ --------- -------
---------------- --------- -------
-
-------- -
------------ -----
-
--- -
----------- -------
-
-- -
---------- ----
------- ------ --
-
---- -
----------- -----
------ -----
-
----- -
---------- ----
-
------- -
---------- ----
------------ --
--------- ---------
--------------- ---------
-
--- -
---- -------
-
--- -
------- --------
-
--- -
------- --
-
-------------- -
--------- -------
-
------------------------------------- -
------- --
----- --------
------ --------
-
------ -
--------- --------
-
------------- -
--------------- -----
-
----------- ------------------------------------------------------------- -
------------------- -------
----------- -------
------- --------
-
--------------------- --------------- -
------- --------
-
------------------------------------------------ -
-------- --
------- --
-
----- -
------------ -------
-
------------------------------------------ -
----------- -----------
-------- --
-
----------------------------------------------------------------------------------------------- -
------- -----
-
-------------------- -
------------------- ----------
----------- ----------
----------- ------------
-
-------------------------------------------------------------------------------------------------- -
------------------- -----
----------- -----
-
-------- -
------- --- ----- --------
------- - ----
-------- ------ ------- -------
-
------ -
------- --
-------- --
-
-------- -
--------- -----
-
-------- -
------------ -----
-
----- -
---------------- ---------
--------------- --
-
----- -
-------- --
-总结
总的来说，CSS Reset 的作用是为了在浏览器不同的默认风格之间定制自己的样式表。它允许设计师跨浏览器创建在视觉上一致的网站。不过，近年来，CSS Normalizr 已经出现，它可以使开发者更加智能地重置CSS。无论是哪种方案，都是 CSS 开发的重要组成部分，我们需要在实际生产中掌握和应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646c8517968c7c53b0b7b411