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

时间：2011-07-31 03:17:53

标签： css normalize-css

我知道什么是CSS重置，但最近我听说过这个名为Normalize.css的新东西

Normalize.css和Reset CSS之间的区别是什么？

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

它只是CSS重置的新热门词吗？

10 个答案:

答案 0 :(得分：769)

我在normalize.css上工作。

主要区别是：

  1. Normalize.css保留了有用的默认值，而不是“取消停顿”所有内容。例如，sup或sub之类的元素在包含规范化之后“正常工作”。 css（并且实际上变得更加健壮），但在包括reset.css之后，它们在视觉上与普通文本无法区分。因此，normalize.css不会对您施加视觉起点（同质性）。这可能不是每个人的口味。最好的办法是尝试两者并根据您的喜好查看哪些凝胶。

  2. Normalize.css纠正了一些超出reset.css范围的常见错误。它的范围比reset.css更宽，并且还提供了常见问题的错误修复，例如：显示HTML5元素的设置，表单元素缺少font继承，更正font-size的{​​{1}}呈现，IE9中的SVG溢出以及iOS中的pre样式错误。

  3. Normalize.css不会破坏您的开发工具。使用reset.css时常见的烦恼是浏览器CSS调试工具中显示的大型继承链。由于目标样式，这不是normalize.css的问题。

  4. Normalize.css更加模块化。项目分为相对独立的部分，如果您知道它们将会很容易删除部分（如表单规范化）您的网站永远不需要。

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

    6. 我在文章about normalize.css

    中详细介绍了这一点

答案 1 :(得分：244)

主要区别在于：

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

  • Normalize CSS旨在跨浏览器制作内置的浏览器样式一致。像H1-6这样的元素在浏览器中会以一致的方式显示为粗体，更大等等。然后，您应该只添加差异来满足您的设计需求。

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

答案 2 :(得分：37)

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

我同时使用它们。

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

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

问候！

答案 3 :(得分：5)

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

  与许多CSS重置不同，

保留有用的默认值。

答案 4 :(得分：5)

重置似乎是满足自定义设计规范的必要条件，尤其是在复杂的非样板式设计项目中。听起来好像规范化是一种很好的方式来进行纯粹的网络编程，但网站通常是网络编程和UI / UX设计规则之间的联姻。

答案 5 :(得分：5)

首先reset.css是你可以使用的最差的库，因为它删除了HTML的标准结构，并在将{0.02}的边距填充和其他属性的值分配后，以文本形式显示所有内容。 。例如，您会发现0与<H1>相同。

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

答案 6 :(得分：0)

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

答案 7 :(得分：0)

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

  • Normalize.css -顾名思义，它会在浏览器中为其用户代理进行标准化样式，即，由于以下原因，它们在所有浏览器中均相同：默认情况下，它们略有不同。

示例：默认情况下，<h1>内的<section>标签的尺寸小于<h1>标签的“预期”尺寸。另一方面，Microsoft Edge正在使<h1>标记的“预期”大小。 Normalize.css将使其一致。

当前状态：npm存储库显示normalize.css package当前每周有超过50万次下载。 project of the repository中的GitHub星标超过36,000。

  • 重置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软件包显示每周大约有26,000次下载。从项目的repository可以看出，GitHub的星星只有200个。

答案 8 :(得分：0)

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

答案 9 :(得分：0)

Normalize.css

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

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

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

现实生活中的例子

Chrome、Safari 和 Firefox 渲染 <h1>/ <article>/ <aside>/ <nav> 标签内的 <section> 标签，其字体大小为比独立标签小，并且具有不同的边距大小。在 <h1>/ <article>/ <aside>/ <nav> 中包含 <section> 标签的情况下，这些是 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 重置”会重置浏览器用户代理附带的所有样式。

这种方法在上面的例子中效果很好，有那些 <h1> 到 <h6> 默认样式：大多数时候我们既不想要浏览器的默认 font-size 也不想要浏览器的默认 {{ 1}}。

以下是 CSS Reset 的一小部分的示例

margin

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

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; } 到 <h1>、<h6>、<ul> 等

相关问题
最新问题