什么是 CSS Reset 和 Normalize.css
CSS Reset 和 Normalize.css 是前端开发中用于重置或标准化浏览器默认样式的两种方式。它们可以帮助我们更好地控制网页的样式，提高可读性和稳定性。
CSS Reset
CSS Reset 是通过重置所有 HTML 元素的默认样式来实现的。使用 CSS Reset 后，所有浏览器的样式表现将更加一致和可控。但是要注意，使用 CSS Reset 意味着你需要对所有的样式进行重新定义，否则你的网页将是一个空白页面。下面是一个简单的 CSS Reset 样式：
-- -------------------- ---- -------
----- ----- ---- ----- ------- ------- -------
--- --- --- --- --- --- -- ----------- ----
-- ----- -------- -------- ---- ----- -----
---- ---- --- ---- ---- ---- -- -- -----
------ ------- ------- ---- ---- --- ----
-- -- -- -------
--- --- --- --- --- ---
--------- ----- ------ -------
------ -------- ------ ------ ------ --- --- -- -
------- --
-------- --
------- --
-------- --
---------- -----
--------------- ---------
----------- ------------
-Normalize.css
Normalize.css 是一种轻量级、现代化且模块化的 CSS 样式表，目的是让元素在所有现代浏览器中保持样式的一致性。Normalize.css 实现的方式是通过在元素与浏览器之间建立规则和一致的行为。相对于 CSS Reset，Normalize.css 可以让你保留默认的样式规则，并使浏览器样式的表现更统一。下面是一个简单的使用 Normalize.css 的例子：
<head>
<link rel="stylesheet" href="normalize.css">
</head>CSS Reset 和 Normalize.css 的优缺点
CSS Reset 的优缺点
优点：
- 重置所有 HTML 元素的默认样式，可以解决不同浏览器之间样式的一致性问题。
- 可以为自定义样式提供一个统一的基准点。
缺点：
- 破坏了浏览器原本的布局，需要重新设置所有的样式。
- 在某些情况下，CSS Reset 可能会增加冗余的代码，因为某些样式已经是浏览器默认值。
Normalize.css 的优缺点
优点：
- 保留了浏览器的默认样式，用户界面更加一致。
- 修正了浏览器样式间的一些不一致。
- 使用模块化的方式，便于自定义样式。
缺点：
- 由于不同浏览器的样式表现不同，需花费一定精力解决样式冲突问题。
- 需要改变一些默认样式的时候，需要写更多的 CSS。
如何选择
选择 CSS Reset 还是 Normalize.css，取决于你的个人习惯和项目特点。如果你想在各种浏览器中使用自定义样式，而不是默认的样式，那么 CSS Reset 可能是更适合的选择。而 Normalize.css 更适合那些想保留默认样式的用户界面，并应用自定义样式。
结论
CSS Reset 和 Normalize.css 都有它们各自的优缺点，需要根据实际情况选择使用。CSS Reset 可以将默认样式统一，而 Normalize.css 保留了默认样式，让用户界面更加一致。在你的项目中，你可以考虑使用其中一个，以提高你的网站的样式的稳定性和可控性。
参考资料：
- CSS Reset and Normalize: An Introduction
- Should I Use a CSS Reset or Normalize?
- CSS Resets: Undoing Years of Resets
附：Normalize.css 样式
-- -------------------- ---- -------
--- ------------- ------ - --- ------- - -------------------------------- --
-- --------
-------------------------------------------------------------------------- --
---
- -- ------- --- ---- ------ -- --- ---------
- -- ------- ----------- -- ---- ---- ----- ----------- ------- -- ----
--
---- -
------------ ----- -- - --
------------------------- ----- -- - --
-
-- --------
-------------------------------------------------------------------------- --
---
- ------ --- ------ -- --- ---------
--
---- -
------- --
-
---
- ------ --- ------ ------- ------------ -- ---
--
---- -
-------- ------
-
---
- ------- --- ---- ---- --- ------ -- ---- -------- ------ --------- ---
- --------- -------- -- ------- -------- --- -------
--
-- -
---------- ----
------- ------ --
-
-- -------- -------
-------------------------------------------------------------------------- --
---
- -- --- --- ------- --- ------ -- --------
- -- ---- --- -------- -- ---- --- ---
--
-- -
----------- ------------ -- - --
------- -- -- - --
--------- -------- -- - --
-
---
- -- ------- --- ----------- --- ------- -- ---- ---- -- --- ---------
- -- ------- --- --- ---- ---- ------ -- --- ---------
--
--- -
------------ ---------- ---------- -- - --
---------- ---- -- - --
-
-- ---------- ---------
-------------------------------------------------------------------------- --
---
- ------ --- ---- ---------- -- ------ ----- -- -- ---
--
- -
----------------- ------------
-
---
- -- ------ --- ------ ------ -- ------ ---
- -- --- --- ------- ---- ---------- -- ------- ----- --- ------ --- -------
--
----------- -
-------------- ----- -- - --
---------------- ---------- -- - --
---------------- --------- ------- -- - --
-
---
- --- --- ------- ---- ------ -- ------- ----- --- -------
--
--
------ -
------------ -------
-
---
- -- ------- --- ----------- --- ------- -- ---- ---- -- --- ---------
- -- ------- --- --- ---- ---- ------ -- --- ---------
--
-----
----
---- -
------------ ---------- ---------- -- - --
---------- ---- -- - --
-
---
- --- --- ------- ---- ---- -- --- ---------
--
----- -
---------- ----
-
---
- ------- ----- --- ----- -------- ---- --------- --- ---- ------ --
- --- ---------
--
----
--- -
---------- ----
------------ --
--------- ---------
--------------- ---------
-
--- -
------- --------
-
--- -
---- -------
-
-- -------- -------
-------------------------------------------------------------------------- --
---
- ------ --- ------ -- ------ ------ ----- -- -- ---
--
--- -
------------- -----
-
-- -----
-------------------------------------------------------------------------- --
---
- -- ------ --- ---- ------ -- --- ---------
- -- ------ --- ------ -- ------- --- -------
--
-------
------
---------
-------
-------- -
------------ -------- -- - --
---------- ----- -- - --
------------ ----- -- - --
------- -- -- - --
-
---
- ---- --- -------- -- ---
- -- ---- --- -------- -- -----
--
-------
----- - -- - --
--------- --------
-
---
- ------ --- ----------- -- ---- --------- -- ----- -------- --- ---
- -- ------ --- ----------- -- ---- --------- -- --------
--
-------
------ - -- - --
--------------- -----
-
---
- ------- --- ---- ---- --- ------ -- -------- -------- -- -------
--
------ -
---------- ----- -- - --
------- -- -- - --
-
---
- -- ------- --- --- ---------- -- ------ --- -------
- -- ------- --- ------- ----- -- -------
--
-------- -
-------------- ----- -- - --
-------- --------- -- - --
-
---
- -- ---- --- -------- -- ---
- -- ------ --- ------- -- -- ----
--
------------------
-------------- -
------------------- -----------
---------------- -----------
----------- ----------- -- - --
-------- -- -- - --
-
---
- ------- --- ------ ----- -- --------- --- --------- ------- -- -------
--
-------------------------------------------
------------------------------------------ -
------- -----
-
---
- -- ------- --- --- ---------- -- ------ --- -------
- -- ------- --- ------- ----- -- -------
--
--------------- -
------------------- ----- -- - --
--------------- ----- -- - --
-
---
- ------ --- ----- ------- -- ------ --- ------ -- ------
--
------------------------------------------ -
------------------- -----
-
---
- -- ------- --- --------- -- ----- --------- ----- -- --- --- -------
- -- ------ ---- ---------- -- --------- -- -------
--
---------------------------- -
------------------- ------- -- - --
----- -------- -- - --
-
-- -----------
-------------------------------------------------------------------------- --
--
- --- --- ------- ------- -- ------ --- -------
--
------- -
-------- ----------
-
---
- --- --- ------- ------- -- -- ----
--
---- -
----------------- -----
------ -----
-
---
- --- --- ------- ------- -- ----- --- --- -------
--
-------- -
-------- -----
-
---
- --- --- ------- ------- -- -- ----
--
-------- -
-------- -----
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67125b1dad1e889fe2049b44