CSS Reset 和 Normalize.css 是两种用于重置或标准化 CSS 样式的工具。它们的目的是解决不同浏览器下的样式不一致的问题，提高网页的在不同浏览器下的渲染一致性。
CSS Reset
CSS Reset 是一套 CSS 规则集，可以将浏览器默认的样式全部重置为一致的基础样式，从而消除浏览器的默认样式对页面渲染的影响。举个例子，你在不同的浏览器中打开相同的网页，你会发现相同的网页在不同的浏览器中样式可能并不相同，CSS Reset 就是为了解决这个问题。如下是一段常见的 CSS Reset 代码：
-- --------- ---------- ----------- ----------- -
这段代码会将所有元素的 margin 和 padding 设置为 0，并且使用 box-sizing: border-box，这样设置后，元素的宽度就会包括元素的内边距和边框宽度。
Normalize.css
Normalize.css 是一种更加精细化的重置样式工具，它不是将所有浏览器的默认样式重置为一致的基础样式，而是试图为不同的浏览器提供一种统一、合理的默认样式。Normalize.css 及其相似的工具通过定义大量样式来覆盖浏览器默认样式，使得渲染结果更加一致，同时保留了默认样式的优点。如下是一段 Normalize.css 的代码：
---- - ------------ ----- -- - -- ------------------------- ----- -- - -- - ---- - ------- -- - -------- ------ ------- ------- ---- ------- - -------- ------ - -- - ---------- ---- ------- ------ -- - -- --- --
Normalize.css 提供的样式更加细致而且适用范围更广泛，因此使用起来比 CSS Reset 更加方便。
应用场景
在实际开发中，需要根据具体的项目需求来选择使用 CSS Reset 还是 Normalize.css。如果你的项目需要自行定义大量样式，那么使用 CSS Reset 更为合适；如果你的项目需要一个更加稳定、灵活的基础样式，那么推荐使用 Normalize.css。而在某些情况下，有可能需要同时使用两个工具。
以下是一个使用 Normalize.css 的示例：
--------- -----
----- ----------
------
----- ----------------
-------------------- ---------------
----- ---------------- --------------------------------------------------------------------------------
-------
---- -
------------ ------ -----------
-
--------
-------
------
---------- -----------
------- -- - ------------- ------------
-------
-------以上代码使用 Normalize.css 重置了浏览器默认样式，同时自定义了 body 元素的 font-family 样式。
总结
CSS Reset 和 Normalize.css 都是解决不同浏览器下的样式不一致问题的解决方案，二者有区别，根据具体项目需求来选择使用。从整体上看，使用 Normalize.css 可以大幅度的减少编写 CSS 样式的工作量，提高样式行为的统一性和可预测性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64eceb70f6b2d6eab3727a2d