CSS Reset 是一种将浏览器样式重置为一致的基础 CSS 的方法。虽然浏览器在样式表上存在差异，但是使用 CSS Reset 可以确保不同浏览器之间的 HTML 元素有一致的外观。在这篇文章中，我们将深入了解 CSS Reset 的使用场景以及实际应用中需要注意的细节。
使用场景
CSS Reset 的主要使用场景是在项目开始时，清除浏览器的默认样式。这样做的好处是可以让开发人员使用自己的样式表，而不必为了应对不同浏览器而编写大量样式。在使用 CSS Reset 的同时，我们还需要根据自己项目所需的样式来编写额外的样式，从而达到更好的效果。
常见的 CSS Reset
以下是一些常见的 CSS Reset，它们都具有清除浏览器默认样式的功能：
Eric Meyer's Reset
-- -------------------- ---- ------- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ----- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - ------- -- -------- -- ------- -- -------- -- ---------- ----- --------------- --------- ----------- ------------ - ---- - ------------ -- - --- -- - ----------- ----- - ----------- - - ------- ----- - ------------------ ----------------- --------- ------- - -------- --- -------- ----- - ----- - ---------------- --------- --------------- -- -
Normalize.css
-- -------------------- ---- -------
--- ------------- ------ - --- ------- - -------------------------------- --
-- --------
-------------------------------------------------------------------------- --
---
- -- ------- --- ---- ------ -- --- ---------
- -- ------- ----------- -- ---- ---- ----- ----------- ------- -- ----
--
---- -
------------ ----- -- - --
------------------------- ----- -- - --
-
-- --------
-------------------------------------------------------------------------- --
---
- ------ --- ------ -- --- ---------
--
---- -
------- --
-
---
- ------- ----------- -- ------- ----- -- --- --------- -----------------------------------------------------------
--
---- -
------------
----------
-------------- -- ----- --
------ ---- -- ------- --
------- -- -------- ------ -- --
------- -- ------- ---- ---- --- --------- ---- ---- --- ----- -------- --
---------- -- ----- --
---------- ------
-----------
-
-- -------- -------
-------------------------------------------------------------------------- --
---
- ------ --- ------ -- ------ ----- -- ------- ----- --- -------
--
-- ---
-- ---
-- ---
-- ---
-- -- -
------- --
-
---
- ------ --- ------- -- -------
--
-- -
-------- --
-
---
- -- --- --- ------- --- ------ -- --------
- -- ---- --- -------- -- ---- --- ---
--
---- -
----------- ----------- -- - --
--------------------------- ------ -- - --
-
--
---------
------- -
----------- --------
-
---
- ------- --- ---- ---- --------- -- ---
--
-------------- -
--------- -------
-
-- -----
-------------------------------------------------------------------------- --
---
- ------ --- ------ -- ------- --- -------
--
-------
------
---------
-------
-------- -
------- --
-
---
- -- ------- --- --------- -- ----- --------- ----- -- --- --- -------
- -- ------ ---- ---------- -- ------- -- -------
--
-------
----- - -- - --
--------- --------
-
------ - -- - --
--------------- -----
-
---
- ------- --- ------ ----- -- --------- --- --------- ------- -- -------
--
-------------------------------------------
------------------------------------------ -
------- -----
-
---
- -- ------- --- --- ---------- -- ------ --- -------
- -- ------- --- ------- ----- -- -------
--
--------------- -
------------------- ---------- -- - --
--------------- ----- -- - --
-
---
- ------ --- ----- ------- -- ------ --- ------ -- ------
--
------------------------------------------ -
------------------- -----
-
---
- -- ------- --- --------- -- ----- --------- ----- -- --- --- -------
- -- ------ ---- ---------- -- ------- -- -------
--
---------------------------- -
----- --------
------------------- -------
-
-- -----------
-------------------------------------------------------------------------- --
--
- --- --- ------- ------- -- ------ --- -------
--
------- -
-------- ----------
-
---
- ------ --- ------ -- ------ ------ ----- -- -- ---
--
--- -
------------- -----
-
---
- ---- --- -------- -- ---
--
-------------- -
--------- -------
-
-- ----
-------------------------------------------------------------------------- --
---
- --- --- ------- ------- -- ----- -- ---- --- --------
--
-------- -
-------- -----
-
---
- --- --- ------- ------- -- -- ---
--
-------- -
-------- -----
-使用技巧
虽然 CSS Reset 可以很好地清除浏览器默认样式并提供一致的外观，但是我们在实际工作中还需要了解一些技巧：
将 Reset 单独成一个文件
通常我们将 Reset 单独成一个文件，放在样式表的最开始，这样可以确保其他样式不会被浏览器默认样式所干扰。
不做 Reset，而是调整样式
有时候，不是所有浏览器的默认样式都是不好的，有时候我们需要保留某些元素的默认样式，比如表单元素。这时候我们可以不使用 CSS Reset，而是修改某些元素的样式或使用 Normalize.css 来保证一致的外观。
理解响应式设计
在响应式设计中，我们需要在不同的屏幕大小下为元素编写不同的样式。因此，在编写 CSS Reset 时，我们需要考虑在响应式设计下的使用。
结论
在我们开始编写自己的样式表之前，清除浏览器默认样式非常重要。虽然不同的项目可能需要不同的 CSS Reset，但是使用 Reset 可以确保浏览器之间的一致性，缩短开发时间。在深入理解 CSS Reset 的同时，我们还应该注意决策的影响，并采取一些实践技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672dfae9eedcc8a97c869e25