在前端开发中，经常会遇到浏览器缺省样式的影响，例如不同浏览器对于字体大小、行高、间距等的默认设置不同，导致页面显示效果不一致。因此，需要通过一些技巧来避免浏览器缺省样式带来的影响，其中 CSS Reset 技巧是一种常用的方法。
什么是 CSS Reset 技巧
CSS Reset 技巧是一种通过重置浏览器缺省样式来达到相对统一的页面效果的方法。它主要包括两个部分：
- 将各种元素的默认样式归零；
- 自定义样式，使得各种元素的外观表现一致。
这样做的目的是为了减少不合理的浏览器差别，让开发者可以更方便地掌控页面的样式。由于浏览器的默认样式具有固有的差别，所以需要使用 CSS Reset 技巧来实现页面的跨浏览器兼容。
如何使用 CSS Reset 技巧
使用 CSS Reset 技巧的方法很简单，只需要在页面的样式表中添加以下代码：
-- -------------------- ---- -------
-- --- ----- --
----- ----- ---- ----- ------- -------
--- --- --- --- --- --- -- ----------- ----
----- -------- ----- -----
---- ---- --- ---- ---- ---- -- -----
------ ------- ---- ---- ----
-- --
--- --- --- --- --- ---
--------- ----- ------ -------
------ -------- ------ ------ ------ --- --- -- -
------- --
-------- --
------- --
-------- --
---------- -----
--------------- ---------
----------- ------------
-这段代码会重置各种元素的默认样式，并将它们的外观表现一致。这些样式设置包括，将外边距和内边距设为 0、将边框设为 0、将字号设为 100% 等等。
但是，需要注意的是，使用 CSS Reset 技巧时，需要仔细权衡样式的兼容性和效果。如果过度使用 CSS Reset 技巧，会导致页面效果不佳。
示例
以下是一个使用 CSS Reset 技巧的示例代码：
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
-------------------
------ ----------------
-- --- ----- --
----- ----- ---- ----- ------- -------
--- --- --- --- --- --- -- ----------- ----
----- -------- ----- -----
---- ---- --- ---- ---- ---- -- -----
------ ------- ---- ---- ----
-- --
--- --- --- --- --- ---
--------- ----- ------ -------
------ -------- ------ ------ ------ --- --- -- -
------- --
-------- --
------- --
-------- --
---------- -----
--------------- ---------
----------- ------------
-
-- ----- --
---- -
------------ ------ ---------- -----------
---------- -----
------------ ----
------ -----
----------------- --------
-
--- --- --- --- --- -- -
------------ -----
-------------- -----
-
- -
-------------- -----
------------ ----
-
- -
------ --------
---------------- -----
-
------- -
------ --------
---------------- ----------
-
--------
-------
------
-------------
--------- --- ----- ------------
----
------ ---------------------
------ ---------------------
------ ---------------------
-----
-------
-------在这个示例中，我们使用了 CSS Reset 技巧，并对页面进行了一些自定义样式设置。这些设置包括，设置了字体、颜色、背景色等等。通过这种方法，我们可以轻松地创造一个相对一致的页面样式。
总结
CSS Reset 技巧是前端开发中常用的技巧之一，它可以使得我们能够轻松地掌控页面的样式，减少浏览器差别带来的影响。但是，需要注意的是，使用 CSS Reset 技巧时，需要仔细权衡样式的兼容性和效果。只有找到适合自己的样式，才能达到最佳的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649fe58948841e9894c409b7
