前言
在开发网站和应用程序时，样式表是无法避免的一部分。但不同的浏览器和平台可能会对样式表的解释和渲染存在差异，这导致需要通过重设或规范化界面组件的默认样式以确保网站或应用程序在不同浏览器和平台下的正常表现。
Reset CSS 和 Normalize.css 是两个非常流行的样式库，它们的方法和目标略有不同，然而都致力于解决默认样式的差异性问题。
本文旨在通过从差异性角度了解 Reset CSS 和 Normalize.css 的实现来帮助读者更好地理解它们的应用，以及如何选择适合自己的样式库。
何为 Reset CSS
Reset CSS 是一种用于消除默认样式的 CSS 库。它最早由 Eric Meyer 在 2000 年提出，旨在通过重设所有 HTML 元素的默认样式，并移除所有内外边距和具体的预设值，从而消除浏览器之间的样式差异。
以下是Eric Meyer's Reset CSS的一部分源代码：
----- ----- ---- ----- ------- ------- -------
--- --- --- --- --- --- -- ----------- ----
-- ----- -------- -------- ---- ----- -----
---- ---- --- ----- ---- ---- ---- -- -- -----
------ ------- ------- ---- ---- --- ----
-- -- -- -------
--- --- --- --- --- ---
--------- ----- ------ -------
------ -------- ------ ------ ------ --- --- ---
-------- ------ ------- -------- ------
------- ----------- ------- ------- -------
----- ---- ------- ----- -------- --------
----- ----- ------ ----- -
------- --
-------- --
------- --
---------- -----
----- --------
--------------- ---------
-何为 Normalize.css
Normalize.css 是一款用于规范化网页元素样式的 CSS 库。它由 Nicolas Gallagher 和 Jonathan Neal 在 2012 年首次发布，旨在通过重设浏览器的默认样式并保留有用的预设，从而提供更符合常理的排版样式。
以下是 Normalize.css 的一部分源代码：
-- ------------- - --- ------- - -------------------------------- -- -- ------- --------- -- ------- ---------------- --------------- --------------- - ------------------- ------- - -------- - --------- ----- ------- --------- - ------------------ -------------- - ----------- ----------- -------- -- - --------------- - ------------------- ---------- --------------- ----- -
Reset CSS 与 Normalize.css 的差异性
浏览器提供的默认样式在不同的浏览器和平台之间可能存在一些差异。在大多数情况下，这种差异是由于浏览器的实现方式或默认字体样式的不同。 Reset CSS 和 Normalize.css 两者都试图解决差异性问题，然而两者解决问题的方式略有不同。
Reset CSS 的原理
Reset CSS 本质上是通过移除所有默认值来消除样式的差异性。它将页面元素的跨浏览器样式都重置为相同的值，无论是字体还是内外边距都是这样。这种方式通常会导致样式处理比 Normalize.css 多，因为它通过在整个页面中移除所有默认值来重置样式。这使得页面更稳定，但也容易使页面看起来过于相似。
Normalize.css 的原理
Normalize.css 的目标是为不同浏览器和其它设备提供一个一致的样式，同时保留HTML的语义和默认值。它着重于规范化HTML元素之间的差异性，通过设置字体大小、行高等属性来打破浏览器之间的差异性。它定义了如何使用HTML元素，而不是简单地消除所有默认值。
因此，当您使用 Normalize.css 时，样式处理通常比 Reset CSS 少许多，因为它不会影响所有属性。这使得您的页面看起来更加自然，但也不那么稳定。
如何选择适合自己的样式库
当决定在您的项目中使用 Reset CSS 或 Normalize.css 时，您需要考虑项目的实际需求。如果您需要一个高度稳定的页面，那么 Reset CSS 可能是更好的选择，因为它确保页面的跨浏览器表现不会受到差异性的影响。相反，如果您需要能够自然而然地适应不同的设备和浏览器，则 Normalize.css 可能更为合适。
此外，如果您需要您的页面坚定遵循 HTML 的语义化特征，则应该使用 Normalize.css。如果您需要比较干净的页面结构，则可能更倾向于 Reset CSS。
总的来说，您的选择应该取决于您的项目需求，并且您可以采用两种样式库的各种特性来实现最佳的效果。
总结
Reset CSS 和 Normalize.css 都是解决样式差异性问题的流行工具。 Reset CSS 重置了每个元素的所有默认值，以确保所有浏览器渲染的文件相同。Normalize.css 规范化缺省的样式，并规范字体大小、行高和元素之间的差异性，以提供更自然的外观。
了解这些差异性可以帮助您选择适合自己的样式库。您的选择应该取决于您的项目需求，并且应根据具体的需求来灵活运用这两种库的特性。
参考代码：
-- ----- --- -- - - ------- -- -------- -- - ------------------------------------------------------------------------------------------------------ - ------- -- -------- -- ------- -- ---------- ----- ----- -------- --------------- --------- - -- ------------- -- ------- ---------------- --------------- --------------- - ------------------- ------- - -------- - --------- ----- ------- --------- - ------------------ -------------- - ----------- ----------- -------- -- - --------------- - ------------------- ---------- --------------- ----- -
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6465ae79968c7c53b0658f57