Normalize.css 和 Reset CSS 之间有什么区别？
我知道 CSS Reset 是什么，但最近我听说了这个叫做 Normalize.css 的新东西
规范化 CSS 和重置 CSS 有什么区别？
这只是 CSS Reset 的一个新流行词吗？
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
我知道 CSS Reset 是什么，但最近我听说了这个叫做 Normalize.css 的新东西
规范化 CSS 和重置 CSS 有什么区别？
这只是 CSS Reset 的一个新流行词吗？
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
发布评论
评论（10）
我从事 Normalize.css 工作。
主要区别是：
Normalize.css 保留有用的默认值，而不是“取消样式化”所有内容。例如，
sup或sub等元素包含normalize.css后“正常工作”（并且实际上变得更加健壮），而包含reset.css后它们在视觉上与普通文本没有区别。因此，normalize.css 不会给您强加视觉起点（同质性）。这可能不符合每个人的口味。最好的办法是对两者进行试验，看看哪种凝胶符合您的偏好。Normalize.css 纠正了一些超出了 reset.css 范围的常见错误。它的范围比 reset.css 更广，并且还提供了常见问题的错误修复，例如：显示设置HTML5 元素、表单元素缺乏
font继承、更正pre的font-size渲染、IE9 中的 SVG 溢出以及>button中的样式错误iOS。Normalize.css 不会让您的开发工具变得混乱。使用 reset.css 时常见的一个问题是浏览器 CSS 调试工具中显示的大型继承链。由于目标样式，这对于 normalize.css 来说不是一个问题。
Normalize.css 更加模块化。 该项目被分解为相对独立的部分，如果您知道永远不需要这些部分（例如表单规范化），您可以轻松删除它们由您的网站。
Normalize.css 拥有更好的文档。 normalize.css 代码内联且更全面地记录在 GitHub 维基。这意味着您可以找出每行代码的作用、为什么包含它、浏览器之间的差异是什么，并且更轻松地运行您自己的测试。该项目旨在帮助人们了解浏览器默认情况下如何呈现元素，并使他们更容易参与提交改进。
我在一篇文章关于normalize.css中对此进行了更详细的描述
I work on normalize.css.
The main differences are:
Normalize.css preserves useful defaults rather than "unstyling" everything. For example, elements like
suporsub"just work" after including normalize.css (and are actually made more robust) whereas they are visually indistinguishable from normal text after including reset.css. So, normalize.css does not impose a visual starting point (homogeny) upon you. This may not be to everyone's taste. The best thing to do is experiment with both and see which gels with your preferences.Normalize.css corrects some common bugs that are out of scope for reset.css. It has a wider scope than reset.css, and also provides bug fixes for common problems like: display settings for HTML5 elements, the lack of
fontinheritance by form elements, correctingfont-sizerendering forpre, SVG overflow in IE9, and thebuttonstyling bug in iOS.Normalize.css doesn't clutter your dev tools. A common irritation when using reset.css is the large inheritance chain that is displayed in browser CSS debugging tools. This is not such an issue with normalize.css because of the targeted stylings.
Normalize.css is more modular. The project is broken down into relatively independent sections, making it easy for you to potentially remove sections (like the form normalizations) if you know they will never be needed by your website.
Normalize.css has better documentation. The normalize.css code is documented inline as well as more comprehensively in the GitHub Wiki. This means you can find out what each line of code is doing, why it was included, what the differences are between browsers, and more easily run your own tests. The project aims to help educate people on how browsers render elements by default, and make it easier for them to be involved in submitting improvements.
I've written in greater detail about this in an article about normalize.css
主要区别在于：
CSS 重置的目的是删除所有内置浏览器样式。 H1-6、p、strong、em 等标准元素最终看起来完全一样，根本没有任何装饰。然后，您应该自己添加所有装饰。
标准化 CSS 旨在使内置浏览器样式在不同浏览器中保持一致。像 H1-6 这样的元素将在浏览器中以一致的方式显示为粗体、更大等。然后，您应该仅在设计所需的装饰中添加差异。
如果您的设计a)遵循排版等方面的常见约定，并且b) Normalize.css 适用于您的目标受众，那么使用 Normalize.CSS 而不是 CSS 重置将会使您自己的 CSS 更小、编写速度更快。
The major difference is that:
CSS resets aim to remove all built-in browser styling. Standard elements like H1-6, p, strong, em, et cetera end up looking exactly alike, having no decoration at all. You're then supposed to add all decoration yourself.
Normalize CSS aims to make built-in browser styling consistent across browsers. Elements like H1-6 will appear bold, larger et cetera in a consistent way across browsers. You're then supposed to add only the difference in decoration your design needs.
If your design a) follows common conventions for typography et cetera, and b) Normalize.css works for your target audience, then using Normalize.CSS instead of a CSS reset will make your own CSS smaller and faster to write.
Normalize.css 主要是一组样式，基于其作者认为好看的样式，并使其在浏览器中看起来一致。重置基本上会从元素中剥离样式，以便您可以更好地控制所有内容的样式。
我两者都用。
有些样式来自 Reset，有些来自 Normalize.css。例如，在 Normalize.css 中，有一种样式可以确保所有输入元素具有相同的字体，但这种情况不会发生（在文本输入和文本区域之间）。 Reset 没有这样的样式，因此输入具有不同的字体，这通常是不需要的。
所以基本上，使用两个 CSS 文件可以更好地“均衡”所有内容；）
问候！
Normalize.css is mainly a set of styles, based on what its author thought would look good, and make it look consistent across browsers. Reset basically strips styling from elements so you have more control over the styling of everything.
I use both.
Some styles from Reset, some from Normalize.css. For example, from Normalize.css, there's a style to make sure all input elements have the same font, which doesn't occur (between text inputs and textareas). Reset has no such style, so inputs have different fonts, which is not normally wanted.
So bascially, using the two CSS files does a better job 'Equalizing' everything ;)
regards!
从它的描述来看，它似乎试图使用户代理的默认样式在所有浏览器中保持一致，而不是像重置那样剥离所有默认样式。
Well from its description it appears it tries to make the user agent's default style consistent across all browsers rather than stripping away all the default styling as a reset would.
首先
reset.css是您可以使用的最差的库，因为它删除了 HTML 的标准结构，并在将边距填充和其他属性的值分配给后将您编写的所有内容显示为文本0 。例如，您会发现与相同。另一方面，
Normalize.css使用标准结构，并且还修复了其中存在的几乎所有错误。例如，它解决了从一个浏览器向另一个浏览器显示表单的问题。 Normalize 通过修改此功能来修复此问题，以便您的元素在所有浏览器上显示相同。First
reset.cssis the worst library you can use, because it removes the standard structure of HTML and displays everything you write just as text, after assigning the values of margin padding and other attributes to0. So for example you will find that<H1>, will be the same as<H6>.On the other hand
Normalize.cssuses the standard structure and also fixes almost all the errors existing in it. For example it fixes the problem with showing a form from one browser to another. Normalize fixes this by modifying this features so your elements will be shown the same on all browsers.重置似乎是满足自定义设计规范的必要条件，尤其是在复杂的非样板类型设计项目中。听起来规范化是进行纯粹 Web 编程的好方法，但网站通常是 Web 编程和 UI/UX 设计规则之间的结合。
resetting seems a necessity to meet custom design specifications, especially on complex, non-boilerplate type design projects. It sounds as though normalizing is a good way to proceed with purely web programming in mind, but oftentimes websites are a marriage between web programming and UI/UX design rules.
这个问题已经被回答过好几次了，我将对每个问题进行简短的总结，截至 2019 年 9 月的示例和见解：
示例：默认情况下，
内的标记会小于的“预期”大小标签。另一方面，Microsoft Edge 正在制作标签的“预期”大小。 Normalize.css 会使其保持一致。当前状态：npm 存储库显示 normalize.css 包 目前每周下载量超过 50 万次。 存储库项目中的 GitHub star 超过 36k。
示例：它会执行如下操作：
当前状态：它比 Normalize.css（reset-css 包显示每周下载量约为 26,000 次。 GitHub 星数只有 200，这可以从项目的 存储库 中看出。
This question has been answered already several times, I'll short summary for each of them, an example and insights as of September 2019:
Example:
<h1>tag inside<section>by default Google Chrome will make smaller than the "expected" size of<h1>tag. Microsoft Edge on the other hand is making the "expected" size of<h1>tag. Normalize.css will make it consistent.Current status: the npm repository shows that normalize.css package has currently more than 500k downloads per week. GitHub stars in the project of the repository are more than 36k.
Example: it would do something like that below:
Current status: it's much less popular than Normalize.css, the reset-css package shows it's something around 26k downloads per week. GitHub stars are only 200, as it can be noticed from the project's repository.
有时，最好的解决方案是同时使用两者。有时，两者都不用。有时，需要使用其中之一。如果您希望在所有浏览器中重置所有样式（包括边距和填充），请使用reset.css。然后自己应用所有装饰和样式。如果您只是喜欢内置样式，但想要更多的跨浏览器同步性（即规范化），那么请使用 normalize.css。但如果您选择同时使用reset.css 和normalize.css，请先链接reset.css 样式表，然后（立即）链接normalize.css 样式表。有时，问题并不总是哪个更好，而是何时使用哪一个、何时同时使用以及何时两者都不使用的问题。恕我直言。
Sometimes, the best solution is to use both. Sometimes, it is to use neither. And sometimes, it is to use one or the other. If you want all the styles, including margin and padding reset across all browsers, use reset.css. Then apply all decorations and stylings yourself. If you simply like the built-in stylings but want more cross-browser synchronicity i.e. normalizations then use normalize.css. But if you choose to use both reset.css and normalize.css, link the reset.css stylesheet first and then the normalize.css stylesheet (immediately) afterwards. Sometimes it's not always a matter of which is better, but when to use which one versus when to use both versus when to use neither. IMHO.
Normalize.css
Normalize.css 是一个小型 CSS 文件，它在 HTML 元素的默认样式中提供跨浏览器的一致性。
这意味着，如果我们查看浏览器所应用的样式的 W3C 标准，并且其中一个浏览器中存在不一致，则
normalize.css样式将修复具有以下错误的浏览器样式：区别。但在某些情况下，我们无法按照标准修复有问题的浏览器，通常是因为 IE 或 EDGE。在这些情况下，Normalize 中的修复会将 IE 或 EDGE 样式应用到其余浏览器。
现实生活示例
Chrome、Safari 和 Firefox 渲染
/标签
示例：
重置CSS
重置 CSS 采用不同的方法，表示我们根本不需要浏览器的默认样式。无论我们需要什么样式，我们都会根据需要在项目中定义。因此，“CSS Reset”会重置浏览器用户代理附带的所有样式。
这种方法在上面的示例中效果很好，使用
到默认样式：大多数时候我们不需要浏览器的默认font-size也不是浏览器的默认margin。这是 CSS Reset 的一小部分的示例
在 CSS Reset 方式中，我们定义所有 HTML 标签没有 padding、没有 margin、没有边框、相同的 font-size 和相同的对齐方式。
CSS Resets 的问题在于它们很丑陋：它们有一大串选择器，并且进行了大量不必要的覆盖。更糟糕的是，它们在调试时不可读。
但仍然有一些样式我们更喜欢重置，例如将
重置为、、< ;li>等Normalize.css
Normalize.css is a small CSS file that provides cross-browser consistency in the default styling of HTML elements.
That means, that if we look at the W3C standards of the styles applied by the browsers, and there is an in inconsistency in one of the browsers, the
normalize.cssstyles will fix the browser style that has the difference.But in some cases we can’t fix the faulty browsers according to the standard, usually because of IE or EDGE. In these cases the fixes in the Normalize will apply the IE or EDGE styles to the rest of the browsers.
Real life example
Chrome, Safari and Firefox render
<h1>tags that are inside an<article>/<aside>/<nav>/<section>tag with a font-size that is smaller than an independent tag, and with a different margin size. These are the user agent styles in Chrome, Safari and Firefox in the case of an<h1>tag inside an<article>/<aside>/<nav>/<section>Tag
Example:
Reset CSS
Reset CSS takes a different approach and says that we don’t need the browsers’ default styles at all. Whatever styles we need, we’ll define in the project according to our needs. So “CSS Reset” resets all of the styles that come with the browser’s user agent.
This approach works well in the above example, with those
<h1>to<h6>default styles: most of the time we want neither the browsers’ defaultfont-sizenor the browser’s defaultmargin.Here is an example of what a small part of CSS Reset looks like
In the CSS Reset way, we define all HTML tags to have no padding, no margin, no border, the same font-size and the same alignments.
The problem with CSS Resets is that they are ugly: they have a big chain of selectors, and they make a lot of unnecessary overrides. And even worse, they are unreadable when debugging.
But still there are styles we prefer to reset like
<h1>to<h6>,<ul>,<li>and etc.Normalize.css：每个浏览器都带有一些默认的 css 样式，例如，在段落或标题周围添加填充。如果添加规范化样式表，所有这些浏览器默认规则都将被重置，以便对于此实例，标签上的填充为 0px。以下是一些有关更多详细信息的链接：https://necolas.github.io/normalize.css/ http: //nicolasgallagher.com/about-normalize-css/
Normalize.css :Every browser is coming with some default css styles that will, for example, add padding around a paragraph or title.If you add the normalize style sheet all those browser default rules will be reset so for this instance 0px padding on tags.Here is a couple of links for more details: https://necolas.github.io/normalize.css/ http://nicolasgallagher.com/about-normalize-css/