如果你做前端开发，你一定知道 CSS 的重要性。但你是否遇到过这些问题：
- 不同浏览器对同一标签的默认样式差异明显，需要手动调整；
- 页面元素的边距、字体、行高等默认值不尽如人意，需要手动调整；
- 使用第三方组件库时，可能会出现样式冲突的问题。
这些都是与 CSS 相关的问题，而 CSS Reset 能够帮助解决这些问题。
CSS Reset 是什么？
简单来说，CSS Reset 是一种样式重置方案，它通过给 HTML 元素添加一套全新的样式规则，以达到将浏览器默认样式清除的目的。其目的是以确保网页在不同浏览器环境下呈现出一致的效果。
注意，CSS Reset 并不是一种万金油的样式方案，它只能够让你在不同浏览器中得到统一的输入。但不代表它可以处理所有不同的场景问题。
CSS Reset 的基本原则
CSS Reset 不是一种终极解决方案，我们要做的是根据我们的需求选择一个合适的 CSS Reset，或者自己编写适合自己项目的CSS Reset 切记不要全部的样式全部重写，这样会影响到以前的CSS。
具体来讲，CSS Reset 的基本原则如下：
- 如果没有必要，不要定义 class，避免样式覆盖的混乱；
- 不要在 CSS 中使用 ID 选择器，以避免样式难以继承和修改；
- 不要通过浏览器内置的样式表设置默认字体和行高。
CSS Reset 的示例代码
-- ---- -- ----- --
--
- -- ------ - ------- ------ ---------------------
- -----------------------------------------------------------------------
--
-- --- ------ ----- --
--
----------
-------- -
----------- -----------
-
-- ------ ------- ------- --
----------
--------- -
-------- --
-
-- ------ ------- ------ --
-----
---
---
---
---
---
---
----------
----------
-- -
------- --
-------- --
-
-- --- ---- ---- -------- --
---- -
----------- ------
---------------- -------
--------------- --------------
------------ ----
-
-- ------ ---- ------ -- --- -- -------- ---- - ----- --------- --
----------
--------- -
----------- -----
-
-- - -------- ---- ----- ---- - ----- --- ------- ------ --
-------------- -
------------------------- -----
-
-- ---- ------ ------ -- ---- ---- --
--- -
---------- -----
-------- ------
-
-- ------- ---- --- ------ -- -------- -- ------- --
------- - - - - -
----------- ----
-
-- ------- ----- --- ------ --- ------- --
------
-------
---------
------ -
----- --------
-
-- ------ --- ---------- --- ----------- --- ------ ---- ------ --- -- --- ---- --
------ ------------------------ ------- -
- -
------------------- ------ -----------
-------------------------- - -----------
-------------------- ------ -----------
---------------- ---- -----------
-
-总结
CSS Reset 是一种样式重置方案，可以帮助我们处理浏览器默认样式带来的问题，确保页面在不同环境下呈现出统一的效果。但我们必须谨慎地选择 CSS Reset 或编写自己的 CSS Reset，以避免影响页面的原来样式。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/652d37687d4982a6ebe9fab4