在前端开发中，CSS 是最核心的部分之一，它掌控了页面的样式和布局，让页面从一个普通的 HTML 文档变得更加优美和易于使用。但是，对于初学者来说，熟练地使用 CSS 并不容易，因为浏览器默认样式和盒模型差异等问题会导致网页在不同浏览器和设备上显示效果不一致。因此，为了让 CSS 更加稳定和可靠，我们需要引入 CSS Reset 或 Normalize.css。
什么是 CSS Reset？
CSS Reset 是用于重置浏览器默认样式的一系列 CSS 规则。它有助于规定元素的标准样式，消除浏览器之间的差异，确保所有浏览器对元素的基本样式的解释都相同。
由于不同浏览器之间在默认样式上的实现会存在许多差异，所以一个通用的 CSS Reset 可以清除浏览器默认样式造成的影响，使得开发者可以根据自己的需求自定义样式，并使对浏览器兼容性的处理更加方便和稳定。
以下是一个简单的 CSS Reset：
* {
margin: 0;
padding: 0;
border: 0;
}这个 Reset 规则会将所有页面元素的内外间距和边框设置为 0。当然，这只是 CSS Reset 库中的一个非常简单的示例，真正的 CSS Reset 应该包含更多的样式规则。
什么是 Normalize.css？
与 CSS Reset 不同，Normalize.css 是将 HTML 元素的默认样式标准化，并修复常见的浏览器渲染差异的一张非常全面的 CSS 样式库。它与 CSS Reset 相似，但它将样式标准化到了一定程度，使得开发人员可以在不同的浏览器和设备上得到更统一的样式效果。
Normalize.css 包含了一份非常长的 CSS 文件，它在 GitHub 上是公开的，可以直接下载并引入到页面中。
以下是一个简单的 Normalize.css 样式规则：
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
body {
margin: 0;
}这个 Normalize 样式可以用于设置文本的行高和调整文本的大小，这有助于保证这些文本在各种访问设备上保持一致，使其更容易阅读。
为何要使用 CSS Reset 或 Normalize.css？
如果你开始学习 CSS，你可能会发现在不同浏览器和设备上的页面显示效果会非常不同，甚至会出现很多问题，如样式死循环、盒模型不一致等。这些问题是由于不同浏览器之间的差异和默认样式造成的。
通过引入 CSS Reset 或 Normalize.css，可以保证页面在不同浏览器或设备上具有更加一致的样式，这能够减少开发者的样式调试时间，并且让开发者可以更加专注于其他更有价值的开发任务上。
如何使用 CSS Reset 或 Normalize.css？
使用 CSS Reset 或 Normalize.css 非常简单，只需要在项目中引入即可。以下是一个简单的示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------------
----- ---------------- ---------------------
----- ---------------- ---------------------
-------
------
---------------
----------------
----
------- ------
------- ------
------- ------
-----
-------
-------其中，我们已经链接了 reset.css 和 style.css 两个 CSS 文件，reset.css 包含了 CSS Reset 的定义，而 style.css 则是自定义的样式表。
当浏览器使用这些样式表来渲染页面时，它会先使用 reset.css 重置默认的样式，然后使用 style.css 自定义样式。这种方式能够有效地提高样式的兼容性和页面的稳定性。
总结
CSS 作为前端开发中最重要的一部分，它的稳定性和兼容性对页面的效果有着非常重要的影响。为了解决浏览器之间的差异和默认样式问题，我们可以使用 CSS Reset 或 Normalize.css 样式库，这些样式库能够标准化浏览器样式，为自定义样式提供更稳定和可靠的基础。
当你开始进一步学习 CSS 时，请记住这个小技巧，这可以为你的前端开发之旅打下坚实的基础。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cde222b5eee0b5255d3f78