引言
在编写Web前端页面时，我们需要在样式表中设置一些基础样式。通常情况下，浏览器会默认一些样式，但这些默认样式可能会导致跨浏览器表现不一致。因此，我们需要使用CSS Reset来重置浏览器默认样式，以在所有浏览器中保持一致的表现。如何选择合适的CSS Reset，本文将会详细介绍。
何为CSS Reset
CSS Reset是一种CSS技术，用于重置页面元素的默认CSS样式。CSS Reset工具通常包含了一系列CSS规则，通过这些规则可以清除浏览器默认的一些属性样式，然后通过自定义的样式来实现统一的表现。
何时使用CSS Reset
在开发Web应用程序时，使用CSS Reset是一个很好的实践，可以避免因浏览器默认样式带来的问题。例如，如果在某个段落中使用的是默认字体大小和颜色等属性，那么在不同的浏览器中，这些属性在不同的用户设置和浏览器版本中可能会有所不同。
使用CSS Reset是为了确保样式表从一个干净的状态开始，并避免造成任何干扰。
常见CSS Reset
1. Normalize.css
Normalize.css是最常用的CSS Reset工具之一。它被认为是一个渐进的、跨浏览器的CSS Reset样式库，使浏览器显示一致的样式。它不是重置所有样式，而是尽量保留一些有用的环境样式，在此基础上修复跨浏览器问题。
Normalize.css做了很多工作来解决著名的"哑巴样式"问题，例如：列表项之间的间距、表单元素的不一致等。它也支持RTL（从右到左）的大部分浏览器样式。
关于Normalize的使用，可以使用CDN，也可以下载安装（https://necolas.github.io/normalize.css/）。
2. Reset.css
Reset.css是第一个常见的CSS Reset库。该库明确地将web页面从浏览器默认样式中解放出来。它重置了大部分HTML元素的默认样式，包括块状元素的外边距，超链接下划线等。它通过提供空白的canvas，让开发者按自己需要的样式重新定义。
Contextual.css是Reset.css的扩展，用于处理不同场景下的默认样式。例如：它会针对一些具有特定功能（如文章列表）的选择器，添加特定的CSS样式来处理。
关于Reset的使用，可以使用CDN，也可以下载安装（https://meyerweb.com/eric/tools/css/reset/）。
3. Eric Meyer'sCSS Reset
Eric Meyer'sCSS Reset 是由CSS专家Eric Meyer创建的一种CSS Reset，它与Reset.css相似，首先重置所有元素的默认外边距、内边距、边框和背景属性，随后，为元素添加边距和边框。它提供大量注释和替代样式定义。可在此处下载:（https://meyerweb.com/eric/tools/css/reset/）。
4. Yahoo YUI Reset.css
Yahoo YUI Reset.css 是Yahoo开发的一种CSSReset库，具有广泛的功能。它通过重置默认负边距、调整默认元素间隔、提高标题间距等方式来进行CSS Reset，并为需要修复的元素添加默认的样式。
关于这种CSS Reset的使用，可以使用CDN，也可以下载安装（https://developer.yahoo.com/yui/reset/）。
如何选择CSS Reset
在选择CSSReset时，你需要考虑以下几个方面：
它是否适合现有的项目。不同的CSS Reset工具可能适用于不同的项目类型和需求。在选择CSSReset时，要考虑需要修复的问题以及需要保留的样式。
每个CSS Reset可能具有一些不同的规则和修复方式。在选择CSSReset时，需要查看其文档并确保了解其如何影响您的样式表。
您的个人偏好。您可能更喜欢某种特定的CSSReset，因为该Reset符合您的编码偏好。
结论
尽管在这篇文章中，你可能对不同的CSSReset库感到不知所措，但相信在了解它们之后，你会在项目中更好地使用CSS Reset，并消除不必要的问题。
无论使用哪种CSS Reset库，一定要在CSS Reset后清楚自己需要的样式，并避免在样式表中使用冗余样式，以减少样式表大小并提高性能。
示例代码：
Normalize.css示例代码:
----- ---------------- -----------------------------------------------------------------
Reset.css示例代码：
----- ---------------- -----------------------------------------------------------
Eric Meyer'sCSS Reset示例代码：
----- ---------------- -----------------------------------------------------------------
Yahoo YUI Reset.css示例代码：
----- ---------------- --------------------------------------------------------------------
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6711bd2bad1e889fe20084b8