在前端页面开发过程中，经常会遇到浏览器兼容性问题，不同浏览器对相同的 CSS 样式解释和处理的结果往往不尽相同，导致页面呈现效果存在差异，给页面的UI效果和用户体验造成影响。
为了解决这一问题，前端开发人员会采用 CSS Reset 技术来消除浏览器默认样式的影响，使得样式在不同浏览器中得到一致的呈现效果，提升页面的兼容性和美观度。
什么是 CSS Reset？
CSS Reset 是一种前端开发技术，它的主要作用是重置或消除页面不同浏览器之间的默认样式差异，形成一套统一的样式规则，从而改善页面样式的跨浏览器兼容性。
CSS Reset 的实现方式往往是通过在样式表中定义一组通用的样式规则，覆盖默认的浏览器样式。这些通用样式规则的定义通常包括对页面各个元素的属性值重置或设定一个统一的默认值。
采用 CSS Reset 技术的好处是可以避免从不同浏览器中继承而来的样式污染和不必要的样式特定性冲突，提高了页面样式的可维护性和可读性。
常用的 CSS Reset 技术
Eric Meyer Reset
Eric Meyer Reset 是最早出现的 CSS Reset 技术之一，由前端领域的知名专家 Eric Meyer 提出。它的目标是通过将所有元素的 padding 和 margin 值设为 0，border 属性设为none ，将所有字体设为相同大小的字体，来消除浏览器之间的默认样式差异。
Eric Meyer Reset 的主要优点是针对性强，可自定义性高，使用起来比较灵活，但缺点是相对于其它 Reset 技术来说比较重，需要的重置样式较多，开发成本相对较高。
示例代码：
-- -------------------- ---- ------- ----- ----- ---- ----- ------- ------- --- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ----- ---- ---- ---- -- -- ----- ------ ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - ------- -- -------- -- ------- -- -------- -- ---------- ----- --------------- --------- ----------- ------------ - ---- - ------------ -- - --- -- - ----------- ----- - ----------- - - ------- ----- - ------------------ ----------------- --------- ------- - -------- --- -------- ----- - ------ - -------- -- - --- - ---------------- ----- - --- - ---------------- ------------- - ----- - ---------------- --------- --------------- -- -
Normalize.css
Normalize.css 是另一种常用的 CSS Reset 技术。与 Eric Meyer Reset 不同，Normalize.css 不是通过重置所有元素的默认样式，而是通过规定 CSS 规范的样式来消除不同浏览器之间的差异。Normalize.css 可以使所有浏览器的样式效果大致一致，而且仅占用很少的样式表代码。
Normalize.css 的主要优点是样式规范，支持自定义，易于维护，缺点是需要的 CSS 预处理工具，对浏览器版本的支持不够稳定。
示例代码：
-- -------------------- ---- -------
--- ------------- ------ - --- ------- - -------------------------------- --
-- --------
-------------------------------------------------------------------------- --
---
- -- ------- --- ---- ------ -- --- ---------
- -- ------- ----------- -- ---- ---- ----- ----------- ------- -- ----
--
---- -
------------ -----
-- - --
------------------------- -----
-- - --
---------------------------- ------- -- -- ---
-- - --
-
-- --------
-------------------------------------------------------------------------- --
---
- ------ --- ------ -- --- ---------
--
---- -
------- --
-
---
- ------ --- ------ ------- ------------ -- ---
--
---- -
-------- ------
-
---
- ------- --- ---- ---- --- ------ -- ---- -------- ------ --------- ---
- --------- -------- -- ------- -------- --- -------
--
-- -
---------- ----
------- ------ --
-
-- ---------- ---------
-------------------------------------------------------------------------- --
---
- ------ --- ---- ---------- -- ------ ----- -- -- ---
--
- -
----------------- ------------
-
---
- -- ------ --- ------ ------ -- ------ ---
- -- --- --- ------- ---- ---------- -- ------- ----- --- ------ --- -------
--
----------- -
-------------- -----
-- - --
---------------- ----------
-- - --
---------------- --------- -------
-- - --
-
---
- --- --- ------- ---- ------ -- ------- ----- --- -------
--
--
------ -
------------ -------
-
---
- -- ------- --- ----------- --- ------- -- ---- ---- -- --- ---------
- -- ------- --- --- ---- ---- ------ -- --- ---------
--
-----
----
---- -
---------- ----
-- - --
------------ ---------- ----------
-- - --
-
---
- --- --- ------- ---- ---- -- --- ---------
--
----- -
---------- ----
-
---
- ------- ----- --- ----- -------- ---- --------- --- ---- ------ --
- --- ---------
--
----
--- -
--------- ---------
---------- ----
------------ --
--------------- ---------
-
--- -
------- --------
-
--- -
---- -------
-
-- -------- -------
-------------------------------------------------------------------------- --
---
- ------ --- ------ -- ------ ------ ----- -- -- ---
--
--- -
------------- -----
-
-- -----
-------------------------------------------------------------------------- --
---
- -- ------ --- ---- ------ -- --- ---------
- -- ------ --- ------ -- ------- --- -------
--
-------
------
---------
-------
-------- -
------------ --------
-- - --
---------- -----
-- - --
------------ -----
-- - --
------- --
-- - --
-
---
- ------ --- ----------- -- ---- --------- -- ---- --- --------
--
-------
------ -
-- - --
--------------- -----
-
---
- -- ------- - ------ --- ----- --- -------- ------ ------- --- -------
- -------- -- ------- -
- -- ------- --- --------- -- ----- --------- ----- -- --- --- -------
--
-------
----------------
---------------
---------------------- -
------------------- -------
-- - --
-
---
- ------ --- ----- ------ --- ------- -- --------
--
----------------- -
------------- -----
-------- --
-
---
- ------- --- ----- ------ ----- -- --- -------- -----
--
--------------- -
-------- --- ------ -----------
-
---
- ------- --- ---- -------- -- ---- --- ---
--
---------------------------- -
-- - --
------------------- -------
-- - --
----- --------
-- - --
-
-- ------- ---- ----- --- ---- ---- ------
-------------------------------------------------------------------------- --
----------------
------------------
--------------
-----------------
---------------------
---------------
-------------------
----------------
--------------------
----------------
-------------
------------------
-----------------
-------------- -
---------- -----
-
----------------
------------------
--------------
-----------------
---------------
------------------
---------------- -
-- - --
-------------------- -----
------------ -----
-
------ ------------------------ ------- -
-------------------- -
------------------ ---- -----------
---------- ---- -----------
-
-如何使用 CSS Reset 技术？
使用 CSS Reset 技术可以大大提高页面的兼容性和美观度。在使用 CSS Reset 技术之前，请根据项目需求、开发时间、团队规模等因素，选择合适的 Reset 样式库，并在项目中充分测试兼容性。
下面是使用 Normalize.css 在 HTML 页面中使用 CSS Reset 技术的示例代码：
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- --------------- --
---------- ----- ------------
----- ---------------- -------------------- --
----- ---------------- ---------------- --
-------
------
----------------
-------------
----
-------------
-------------
-------------
-----
-------
-------总结
使用 CSS Reset 技术是一种提高前端页面跨浏览器兼容性的有效手段。通过使用 CSS Reset 技术，可以避免页面样式因为浏览器兼容性问题而出现的差异。在使用 CSS Reset 技术时，需要选择合适的 Reset 样式库，并在项目中充分测试兼容性，以达到更好的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a11ead48841e9894d63d27