CSS和Reset CSS的区别是什么?

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

Normalize.css和CSS重置之间有什么区别?

规范化CSS和重置CSS之间的区别是什么?

这只是CSS重置的一个新流行语吗?

247271 次浏览
小开

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

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

小开

主要的区别是:

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

  • 标准化CSS旨在使内置浏览器样式一致跨浏览器。像H1-6这样的元素将以一致的方式在浏览器中显示粗体、较大等。然后你应该只添加差异装饰你的设计需要。

如果您的设计一)遵循排版等常见惯例，而b) Normalize.css适合您的目标受众，那么使用Normalize.css而不是CSS重置将使您自己的CSS更小，编写速度更快。

小开
最佳答案

我的工作是标准化。css。

主要的区别是:

  1. css保留有用的默认值而不是“取消样式化”所有内容。例如，像sup或sub这样的元素在包含normalize.css后“just work”(实际上会变得更健壮)，而在包含reset.css后，它们在视觉上与正常文本难以区分。因此，css不会强加给你一个可视化的起点(同质性)。这可能不符合每个人的口味。最好的办法就是两种都试一试，看看哪一种更符合你的喜好。

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

  3. css不会让你的开发工具变得混乱。在使用reset.css时，一个常见的烦恼是在浏览器CSS调试工具中显示的大型继承链。这不是normalize.css的问题，因为有针对性的样式。

  4. css更加模块化。项目被分解成相对独立的部分，如果你知道你的网站永远不需要这些部分，你可以很容易地删除它们(比如表单规范化)。

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

我在文章关于normalize.css中对此进行了更详细的描述

小开

css主要是一组样式，基于它的作者认为好看的样式，并使它在不同的浏览器中看起来一致。Reset基本上是从元素中剥离样式，这样你就可以更好地控制所有东西的样式。

我两者都用。

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

所以基本上，使用两个CSS文件做一个更好的工作'均衡'一切;)

的问候!

小开

重设似乎是满足定制设计规范的必要条件，特别是在复杂的非样板型设计项目中。听起来似乎规范化是一种纯web编程的好方法，但通常情况下，网站是web编程和UI/UX设计规则的结合。

小开

首先，reset.css是您可以使用的最糟糕的库，因为它删除了HTML的标准结构，并在将空白填充值和其他属性分配给0后，将您编写的所有内容作为文本显示。例如，你会发现<H1>和<H6>是一样的。

另一方面，Normalize.css使用标准结构，并修复了其中存在的几乎所有错误。例如，它解决了表单从一个浏览器显示到另一个浏览器的问题。Normalize通过修改这些特性来解决这个问题，这样你的元素在所有浏览器上的显示都是一样的。

小开

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

小开

这个问题已经回答过几次了，我将对每个问题进行简短的总结，并给出截至2019年9月的例子和见解:

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

例子: <h1>标签内<section>默认谷歌Chrome将使小于<h1>标签的“预期”大小。另一方面，Microsoft Edge正在制作<h1>标签的“预期”大小。css将使其一致。

当前的状态: npm存储库显示，normalize.css包目前每周有超过50万的下载量。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颗，这可以从项目的存储库中看出。

小开

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

小开

Normalize.css

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

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

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

现实生活中的例子

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

标签

:-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重置

Reset CSS采用了一种不同的方法，它说我们根本不需要浏览器的默认样式。无论我们需要什么样式，我们将根据我们的需要在项目中定义。所以“CSS重置”重置浏览器的用户代理提供的所有样式。

这种方法在上面的例子中工作得很好，对于那些<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>等。


提交答案