Normalize.css 和 Reset CSS 有什么区别？

我在 normalize.css 上工作。

主要区别在于：

Normalize.css 保留有用的默认值，而不是“取消样式化”所有内容。例如，像 sup 或 sub 这样的元素在包含 normalize.css 后“正常工作”（实际上变得更加健壮），而在包含 reset.css 后它们在视觉上与普通文本没有区别。因此， normalize.css 不会强加给您一个视觉起点（同质性）。这可能不符合每个人的口味。最好的办法是对两者都进行试验，看看哪种凝胶符合您的喜好。 Normalize.css 更正了一些超出 reset.css 范围的常见错误。它比 reset.css 范围更广，并且还为常见问题提供了错误修复，例如：HTML5 元素的显示设置、表单元素缺少字体继承、更正 pre 的字体大小呈现、IE9 中的 SVG 溢出以及iOS 中的按钮样式错误。 Normalize.css 不会弄乱您的开发工具。使用 reset.css 时的一个常见问题是浏览器 CSS 调试工具中显示的大型继承链。由于有针对性的样式，这不是 normalize.css 的问题。 Normalize.css 更加模块化。该项目被分解为相对独立的部分，如果您知道您的网站永远不需要它们，则可以轻松地删除部分（如表单规范化）。 Normalize.css 有更好的文档。 normalize.css 代码在 GitHub Wiki 中以内联方式和更全面的方式记录。这意味着您可以了解每行代码的作用、包含它的原因、浏览器之间的差异，并更轻松地运行您自己的测试。该项目旨在帮助人们了解浏览器默认如何呈现元素，并使他们更容易参与提交改进。

我在一篇文章 about normalize.css 中对此进行了更详细的描述

---

主要区别在于：

CSS 重置旨在删除所有内置的浏览器样式。 H1-6、p、strong、em 等标准元素最终看起来完全一样，根本没有任何装饰。然后你应该自己添加所有装饰。

规范化 CSS 旨在使内置浏览器样式在浏览器之间保持一致。像 H1-6 这样的元素将在浏览器中以一致的方式显示为粗体、更大等等。然后，您应该只添加设计所需的装饰差异。

如果您的设计 a) 遵循排版等的通用约定，并且 b) Normalize.css 适用于您的目标受众，那么使用 Normalize.CSS 而不是 CSS 重置将使您自己的 CSS 更小更快编写。

---

Normalize.css 主要是一组样式，基于其作者认为看起来不错的样式，并使其在浏览器中看起来一致。重置基本上从元素中剥离样式，因此您可以更好地控制所有内容的样式。

我两个都用。

一些样式来自 Reset，一些来自 Normalize.css。例如，在 Normalize.css 中，有一种样式可以确保所有输入元素都具有相同的字体，这不会发生（在文本输入和文本区域之间）。重置没有这样的样式，所以输入有不同的字体，这通常是不需要的。

因此，基本上，使用这两个 CSS 文件可以更好地“均衡”所有内容；）

问候！

---

从它的描述来看，它似乎试图使用户代理的默认样式在所有浏览器中保持一致，而不是像重置那样剥离所有默认样式。

与许多 CSS 重置不同，保留有用的默认值。

---

第一个 reset.css 是您可以使用的最糟糕的库，因为在将边距填充和其他属性的值分配给 0 之后，它删除了 HTML 的标准结构并将您编写的所有内容都显示为文本。例如，您会发现 <H1> 与 <H6> 相同。

另一方面，Normalize.css 使用标准结构，并且还修复了其中存在的几乎所有错误。例如，它解决了将表单从一个浏览器显示到另一个浏览器的问题。 Normalize 通过修改此功能来解决此问题，因此您的元素将在所有浏览器上显示相同。

---

重置似乎是满足定制设计规范的必要条件，尤其是在复杂的非样板类型设计项目中。听起来好像规范化是进行纯 Web 编程的好方法，但网站通常是 Web 编程和 UI/UX 设计规则之间的结合。

---

有时，最好的解决方案是同时使用两者。有时，两者都不使用。有时，它是使用一个或另一个。如果你想在所有浏览器中重置所有样式，包括边距和填充，请使用 reset.css。然后自己应用所有装饰和样式。如果您只是喜欢内置样式但想要更多的跨浏览器同步性，即规范化，那么请使用 normalize.css。但是，如果您选择同时使用 reset.css 和 normalize.css，请先链接 reset.css 样式表，然后（立即）链接 normalize.css 样式表。有时并不总是哪个更好的问题，而是什么时候使用哪个更好，什么时候同时使用，什么时候都不使用。恕我直言。

---

这个问题已经回答了好几次了，我将为每个人做一个简短的总结，一个例子和截至 2019 年 9 月的见解：

Normalize.css - 顾名思义，它为他们的用户代理规范化浏览器中的样式，也就是说，由于默认情况下它们略有不同，所以它们在所有浏览器中都相同。

示例：默认情况下，<section> 内的 <h1> 标记 Google Chrome 会缩小 <h1> 标记的“预期”大小。另一方面，Microsoft Edge 正在制作 <h1> 标记的“预期”大小。 Normalize.css 将使其保持一致。

当前状态：npm 存储库显示 normalize.css package 目前每周的下载量超过 500k。 project of the repository 中的 GitHub 星数超过 36k。

重置 CSS - 顾名思义，它重置所有样式，即删除所有浏览器的用户代理样式。

示例：它会执行以下操作：

html, body, div, span, ..., audio, video {  
   margin: 0;  
   padding: 0;  
   border: 0;  
   font-size: 100%;  
   font: inherit;  
   vertical-align: baseline; 
}

当前状态：它远不如 Normalize.css 受欢迎，reset-css 包显示它每周的下载量约为 26k。 GitHub 星数只有 200，从项目的 repository 可以看出。

---

规范化.css

Normalize.css 是一个小的 CSS 文件，它在 HTML 元素的默认样式中提供跨浏览器的一致性。

这意味着，如果我们查看浏览器应用的样式的 W3C 标准，并且其中一个浏览器存在不一致，normalize.css 样式将修复存在差异的浏览器样式。

但在某些情况下，我们无法按照标准修复有问题的浏览器，通常是因为 IE 或 EDGE。在这些情况下，Normalize 中的修复程序会将 IE 或 EDGE 样式应用于其余浏览器。

现实生活中的例子

Chrome、Safari 和 Firefox 呈现 <article>/ <aside>/ <nav>/ <section> 标记内的 <h1> 标记，其字体大小小于独立标记，并且具有不同的边距大小。对于 <article>/ <aside>/ <nav>/ <section> 中的 <h1> 标记，这些是 Chrome、Safari 和 Firefox 中的用户代理样式

标签

:-webkit-any(article,aside,nav,section) h1 {
  font-size: 1.5em;
   margin-block-start: 0.83em;
   margin-block-end: 0.83em;
   }

例子：

/* 
 Correct the font size and margin on `h1` elements within `section`  and `article` 
 contexts in Chrome, Firefox, and Safari.
 */
  h1 {  font-size: 2em;  margin: 0.67em 0;}

重置 CSS

重置 CSS 采用了不同的方法，并表示我们根本不需要浏览器的默认样式。无论我们需要什么样式，我们都会根据自己的需要在项目中定义。所以“CSS Reset”会重置浏览器用户代理附带的所有样式。

这种方法在上面的示例中效果很好，具有 <h1> 到 <h6> 的默认样式：大多数情况下，我们既不需要浏览器的默认 font-size，也不需要浏览器的默认 margin。

这是 CSS 重置的一小部分的示例

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, 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, 
article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  
menu, nav, output, ruby, section, summary, time, mark, audio, video {  
margin: 0;  
padding: 0;  
border: 0;  
font-size: 100%;  
font: inherit;  
vertical-align: baseline; 
}

在 CSS 重置方式中，我们将所有 HTML 标记定义为没有填充、没有边距、没有边框、相同的字体大小和相同的对齐方式。

CSS 重置的问题在于它们很丑：它们有一大串选择器，并且会进行很多不必要的覆盖。更糟糕的是，它们在调试时是不可读的。

但仍有一些我们更喜欢重置的样式，例如 <h1> 到 <h6>、<ul>、<li> 等。

---

Normalize.css ：每个浏览器都带有一些默认的 CSS 样式，例如，在段落或标题周围添加填充。如果您添加规范化样式表，所有这些浏览器默认规则都将被重置，因此对于这个例子，标签上的 0px 填充。这里有几个链接了解更多详细信息：https://necolas.github.io/normalize.css/ http://nicolasgallagher.com/about-normalize-css/

---