重置所有样式？从 Normalize.css 到 CSS Reset
前言
当我们开发一个新的Web项目时，浏览器样式会影响我们的网站的样式，即所有HTML元素具有默认样式。我们如何清空默认样式? 当然，Reset CSS和Normalize.css是解决这个问题的两种不同方法。在本篇文章中，我将为您介绍这两种方法的区别和如何在项目中使用它们。
什么是CSS重置（CSS Reset）？
CSS重置是指将所有默认样式重置为统一的或特定的样式，以保证在不同浏览器中所得的结果都是一致的。这种方法的主要目的是移除浏览器特定的默认CSS，常常出现的问题是每个浏览器的默认CSS不同，而且在某些情况下，还可能与系统默认的样式对冲。
目前已有很多现成的重置样式表可供使用，如Eric Meyer的Reset CSS，或是Yahoo的Reset CSS。以下是Eric Meyer的一小段代码：
/*适用于Eric Meyer's CSS Reset.2019年10月15日*/ html, body, div, span, applet, object, iframe,《h1》, 《h2》, 《h3》, 《h4》, 《h5》, 《h6》, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup,tt, var, b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;} /*增加一些通用样式,如容器宽度.2019年10月15日*/ .container {max-width: 1200px; margin: 0 auto;}
在这个例子中，我们可以看到，它将所有元素的外边距，边框，内边距，字体大小和其他的一些设置设置为0或继承(parent element)。
虽然CSS重置能够完全控制网页的样式，但问题在于，我们使用的HTML元素在增加时需要重新指定样式。这是因为，它重置了每个元素的样式，因此我们需要重新设置每个元素各自的样式。这会导致在设计和编码过程中的困难。
何谓Normalize.css？
Normalize.css是一种新型的CSS重置方案，旨在在不破坏默认UI体验的基础上改善跨浏览器的一致性。与重置CSS不同，Normalize.css通过在默认的HTML元素样式上应用规则来修复和提强iOS，Android，Windows一体化，等其他平台，并提供了默认的排版设置和优化的CSS注释，以便更好地了解代码所呈现的作用。
现在让我们查看Normalize.css的代码，并了解它如何运作。
-- -------------------- ---- ------- -------------------------------- --- ------------- ------ - --- ------- - -------------------------------- -- ----------------------------------- ---- ------------- ----- ------------------------- ------ --------------------------------------- ---- -------- --- ----- --------- ------- ------------------ ---- --------- ------- ---------------------------------------------------------------------- -- ----------- ---- ------- ------ --- --------------- -- ------------ ------------ ------- -- --------- --------- --- ------------- ---------- ---------- ---------- ----- --------------------------- - ------------------ ------------ ----------------------------- --------- -------------------------- -- ------ ------------- -------- ----- ---- ---- ------------- ---------- ---------- ---------- ----- - -------------------- ----- ------ --------------- --- --------------------- -------- ------------- ------ ------------------ ----- ----------------- ------------------------ --- ------------------------------------- --- -- --------- --- --- ------------- ------ - --- ------- - -------------------------------- --展开代码
需要注意的是，Normalize.css并不是任何方面的“ 零样式”。
如果您查看现代的Web UI库（如Twitter的Bootstrap或Foundation），则不难发现它们都是使用Normalize.css作为其内部样式表。您会发现，Normalize.css大量保留了各种浏览器的默认样式，同时细微地调整了很多元素的样式，以使它们的单个特性在所有浏览器上取得良好的效果。
使用Normalize.css的好处是，它保留了浏览器默认样式的很多缺省特性。使用Normalize.css，您可以专注于自己的设计，而不必担心应用默认设置会影响自己所期望的效果。
那么，哪个更好？
这个问题好像没有简单的答案。Normalize.css和CSS Reset两种方法各有优缺点。如果您想完全控制Web页面的样式，或者您希望设计具有非常特殊或个性化的样式，则CSS重置是最明显的选择（例如，需要构建特定的应用程序样式）。这个有点像从白纸开始写一个书，每一行都是用“font-size: 16px;”来定义的样式；而Normalize.css配合我们的设计进行优化，使我们得到更好的结果，并提高Web应用程序的一致性度。
如果您选择Normalize.css，您将获得一个非常强大的样式库，它可以让您的Web应用程序在任何情况下都表现卓越。如果您选择CSS Reset，则需要向任何单独的规格定制样式的开发人员提供具体指导，并完全独立于其他类库（如Bootstrap和Foundation）。
现在，您可能正在想：“好了，我现在该怎么做？”下面是一个实现Normalize.css的示例代码：
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.css">
这是现代开发过程中推荐的一种方式，一次性download适用各种平台，因此可以在项目中重载（快速加入），并为我们提供所有在设计期间可能需要的默认设置。
如果您想使用类似Eric Meyer的Reset CSS这样的手动方法，则可以通过这个链接获得更多样例代码：https://meyerweb.com/eric/tools/css/reset/
最后，我希望本篇文章能解答您的问题，并帮助您在样式方面更加自信。当然，在任何设计过程中，样式表的使用都是非常重要的，这也是实现一个优秀UI的绝佳机会。希望我添加的查询和样例内容对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d711eea941bf7134ce9b17
