Normalize.css和Reset css之间有什么区别？

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

和之间的区别是什么

规范化CSS和重置CSS之间有什么区别

---

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

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

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

---

主要区别在于：

/* 
 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重置旨在删除所有内置的浏览器样式。像H1-6、p、strong、em等标准元素最终看起来一模一样，没有任何装饰。然后你应该自己添加所有装饰

• 旨在使内置浏览器样式在不同浏览器之间保持一致。像H1-6这样的元素在浏览器中会以一致的方式显示为粗体、较大等等。然后，你应该只添加你的设计需要的装饰差异

---

如果您的设计a）遵循排版等常见惯例，b）Normalize.css适用于您的目标受众，那么使用Normalize.css而不是css重置将使您自己的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代码是内联文档，并且在中有更全面的文档。这意味着您可以了解每一行代码在做什么，为什么包含它，浏览器之间的差异，并且更容易运行您自己的测试。该项目旨在帮助人们了解浏览器在默认情况下如何呈现元素，并使他们更容易参与提交改进

---

我在一篇文章中对此做了更详细的描述。css主要是一组样式，基于作者认为好看的样式，并使其在不同浏览器中保持一致。“重置”基本上会从元素中剥离样式，因此您可以更好地控制所有内容的样式

我两者都用

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

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

---

问候

重置似乎是满足定制设计规范的必要条件，特别是在复杂的非样板设计项目上。听起来，规范化是一个很好的方法，可以在头脑中继续进行纯粹的web编程，但网站通常是web编程和UI/UX设计规则的结合

First

reset.css

是您可以使用的最差的库，因为它删除了HTML的标准结构，并在将边距填充和其他属性的值分配给

0

后将您编写的所有内容显示为文本。例如，您会发现

，与

相同

---

另一方面，

Normalize.css

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

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

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

:-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;}

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; 
}