什么是 reset.css 和 normalize.css
在进行 web 开发时，我们经常需要统一不同浏览器之间的默认样式。为了解决这个问题，出现了两个可以统一默认样式的 css 文件 reset.css 和 normalize.css。
reset.css 是一种重置样式表，其主要作用是将浏览器的默认样式重置为一致的值，以避免不同浏览器之间出现样式混乱的情况。
而 normalize.css 则是一种标准化样式表，它不像 reset.css 那样将所有样式重置为一致的值，而是在不同浏览器之间建立共同的样式基础，保留了一些有用的默认样式，同时修复了一些浏览器之间的样式差异。
选用 reset.css 还是 normalize.css
正如上文所述，reset.css 的核心目标是在所有现代的浏览器上提供一个一致的样式基础。因此，reset.css 重置了所有浏览器的默认样式，让您可以从头开始编写自己的样式。如果您更喜欢从头开始，那么 reset.css 是一个的好选择。
而 normalize.css 更注重在所有浏览器之间建立一个通用的样式基础，保留有用的默认值，并为浏览器之间的差异提供修补程度。如果您想尽可能多地使用默认的浏览器样式，同时保持一致性，则 normalize.css 会更好地满足您的需求。
示例代码
reset.css
-- -------------------- ---- -------
-- --- ------ ----- --
--
----------
-------- -
----------- -----------
-
-- ------ ------- ------- --
----------
--------- -
-------- --
-
-- ------ ------- ------ --
-----
---
---
---
---
--
----------
----------
---
-----------
---
-------
-----------
---
---
-- -
------- --
-
-- --- ---- ---- -------- --
---- -
----------- ------
---------------- -------
--------------- --------------
------------ ----
-
-- ------ ---- ------ -- --- -- -------- ---- - ----- --------- --
----------
--------- -
----------- -----
-
-- - -------- ---- ----- ---- - ----- --- ------- ------ --
-------------- -
------------------------- -----
-
-- ---- ------ ------ -- ---- ---- --
--- -
---------- -----
-------- ------
-
-- ------- ---- --- ------ -- -------- -- ------- --
------- - - - - -
----------- ----
-
-- ------- ----- --- ------ --- ------- --
------
-------
---------
------ -
----- --------
-
-- ------ --- ---------- --- ----------- --
------ ------------------------ ------- -
- -
------------------- ------ -----------
-------------------------- - -----------
-------------------- ------ -----------
---------------- ---- -----------
-
-normalize.css
-- -------------------- ---- ------- -- -------- -------------------------------------------------------------------------- -- --- - -- ------- --- ---- ------ -- --- --------- - -- ------- ----------- -- ---- ---- ----- ----------- ------- -- ---- -- ---- - ------------ ----- -- - -- ------------------------- ----- -- - -- - -- -------- -------------------------------------------------------------------------- -- --- - ------ --- ------ -- --- --------- -- ---- - ------- -- - --- - ------ --- ------ ------- ------------ -- --- -- ---- - -------- ------ - --- - ------- --- ---- ---- --- ------ -- ---- -------- ------ --------- --- - --------- -------- -- ------- -------- --- ------- -- -- - ---------- ---- ------- ------ -- - -- -------- ------- -------------------------------------------------------------------------- -- --- - ------ --- ------- --- ------ --- ------ --- --- ---- --------- -- - - -- -- - -- -- - -- -- - - - ----------- -- -------------- -- - -- --- -- -- - ----------- -- -------------- -- - --- - ------ --- ------- -------- --------- -- -- ---- -- ------------------- - -------- ----- - -- ---------- --------- -------------------------------------------------------------------------- -- --- - ------ --- ------- ------ -- --- --------- -- ------ - ------- -- - --- - --- --- ------- ---- ---------- -- ------- ----- --- ------- -- ----------- - ---------------- ---------- ---------------- --------- ------- - --- - --- --- ------- ---- ------ -- ------- ----- --- ------- -- -- ------ - ------------ ------- - --- - --- --- ------- ---- ---- -- --- --------- -- ----- - ---------- ---- - --- - ------- ----- --- ----- -------- ---- --------- --- ---- ------ -- - --- --------- -- ---- --- - ---------- ---- ------------ -- --------- --------- --------------- --------- - --- - ------- -------- - --- - ---- ------- - -- ----- -------------------------------------------------------------------------- -- --- - ------ --- ------- ------ -- -------- -- ------ - ------ -------- -------- ------ ---------- ----- ------------ ------- -- - -- ----------- ----- -- - -- ---------------- --------- -- - -- --------------- -- -- - -- ------------------- -- ----------------- ----- -------------------- -- ------------------ -- --------------------- -- ------------------- -- - -------- - ------- -- -------- -- - --- - ------- --- ---- -------- -- ---- --- --- -- -------- - --------- ----- -- - -- ------- --------- - --- - ------ --- ----- ------- --- ------ ------- -- ------ --- ------ -- ------ -- --------------- - ------------------- ----- -- - -- --------------- ----- -- - -- - --------------------------------------------- - ------------------- ----- - -- ----------- -------------------------------------------------------------------------- -- -- - --- --- ------- ------- -- ----- -- ---- --- -------- -- ------- - -------- ------ - -- - --- --- ------- ------ --- --- -------- --- -- --- --------- -- -------- - --------------- --------- - -- - ---- --- -------- -- --- -- -------- - --------- ------- - -- ---- -------------------------------------------------------------------------- -- --- - --- --- ------- ------- -- -- ---- -- -------- - -------- ----- -
总结
reset.css 和 normalize.css 都是在 web 开发过程中优化样式表的有力工具。它们在处理不同浏览器之间的样式差异时，有各自的优点和不同的重点。
在选择使用哪个之前，根据您的具体需求确定您希望在所有浏览器中使用的样式基础，以及您想要使用多少默认浏览器样式。不管你最终选择了哪一个，它们都可以在解决样式问题上提供强大的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64685ab2968c7c53b0895cf6