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

我知道CSS重置是什么，但是最近我听说了这个叫做Normalize.css的新东西。

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

标准化CSS和重置CSS有什么区别？

CSS重置只是一个新的流行词吗？

---

#1楼

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

我都用。

Reset中的某些样式，Normalize.css中的一些样式。 例如，在Normalize.css中，有一种样式可以确保所有输入元素都具有相同的字体（在文本输入和文本区域之间）不会出现。 重置没有这种样式，因此输入通常使用不同的字体。

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

问候！

---

#2楼

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

---

#3楼

首先， reset.css是您可以使用的最差的库，因为在将margin padding和其他属性的值赋给0之后，它将删除HTML的标准结构并以文本形式显示您编写的所有内容。 因此，例如，您会发现

与

相同。

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

---

#4楼

有时，最好的解决方案是同时使用两者。 有时，两者都不使用。 有时，是使用其中之一。 如果要在所有浏览器中重置所有样式（包括边距和填充），请使用reset.css。 然后自己应用所有装饰和样式。 如果您只是喜欢内置样式，但想要更多的跨浏览器同步性，即规范化，则可以使用normalize.css。 但是，如果您选择同时使用reset.css和normalize.css，请先链接reset.css样式表，然后再链接（立即）normalize.css样式表。 有时，并非总是哪个更好，而是何时使用哪个相对于何时同时使用两者以及何时不使用两者。 恕我直言。

---

#5楼

这个问题已经被回答了好几次了，我将为每个简短的摘要，一个示例和截至2019年9月的见解：

• Normalize.css-顾名思义，它可以标准化浏览器中其用户代理的样式，即，由于默认情况下它们稍有不同，因此在所有浏览器中使它们相同。

示例 ：默认情况下，

的

标签会小于

标签的“预期”大小。 另一方面，Microsoft Edge正在使

标记的“预期”大小。 Normalize.css将使其一致。

当前状态 ：npm存储库显示normalize.css软件包当前每周有超过50万次下载。 存储库项目中的 GitHub star超过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个。

---

#6楼

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

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

---

#7楼

主要区别在于：

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

• Normalize CSS旨在使内置浏览器样式在各浏览器之间保持一致 。 H1-6之类的元素将在浏览器中以一致的方式显示为粗体，较大等。 然后，您应该仅添加设计需要的装饰差异 。

如果您的设计a）遵循版式和其他方面的通用约定，并且b） Normalize.css适用于您的目标受众，则使用Normalize.CSS而不是CSS重置将使您自己的CSS更小，更快地编写。

---

#8楼

我在normalize.css上工作。

主要区别在于：

1. Normalize.css保留有用的默认值，而不是“取消样式化”所有内容。 例如，诸如sup或sub类的元素在包含normalize.css之后“正常工作”（并且实际上变得更健壮），而在包含reset.css之后它们在视觉上与普通文本没有区别。 因此，normalize.css不会对您施加视觉起点（同质性）。 这可能并不符合所有人的口味。 最好的办法是对两者进行试验，并查看哪种凝胶符合您的偏好。

2. Normalize.css纠正了reset.css超出范围的一些常见错误。 它具有比reset.css更大的范围，并且还针对以下常见问题提供了错误修复：例如HTML5元素的显示设置，表单元素缺乏font继承，更正pre font-size渲染，IE9中的SVG溢出以及iOS中的button样式错误。

3. Normalize.css不会使您的开发工具混乱。 使用reset.css时，常见的问题是浏览器CSS调试工具中显示的较大的继承链。 由于有针对性的样式，因此normalize.css并不是这样的问题。

4. Normalize.css更具模块化。 该项目分为相对独立的部分，如果您知道网站永远不需要这些部分，则可以轻松地删除这些部分（例如表单规范）。

5. Normalize.css具有更好的文档。 内联记录了normalize.css代码，并在GitHub Wiki中进行了更全面的记录。 这意味着您可以找出每一行代码的作用，包含代码的原因，浏览器之间的区别以及更轻松地运行自己的测试。 该项目旨在帮助人们了解浏览器默认情况下如何呈现元素，并使他们更容易参与提交改进。

我在有关normalize.css的文章中对此进行了更详细的介绍