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

CSS和Reset CSS的区别是什么?

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

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


当前回答

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

保留有用的默认值,不像许多CSS重置。

其他回答

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

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

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

我两者都用。

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

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

的问候!

首先,css是你能使用的最糟糕的库,因为它删除了HTML的标准结构,在将空白填充和其他属性的值赋值为0之后,把你写的所有东西都作为文本显示出来。例如,你会发现<H1>和<H6>是一样的。

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

主要的区别是:

CSS重置旨在删除所有内置的浏览器样式。标准元素,如H1-6、p、strong、em等等,最终看起来完全一样,没有任何装饰。然后你应该自己添加所有的装饰。 标准化CSS旨在使内置浏览器样式在不同浏览器之间保持一致。像H1-6这样的元素将以一致的方式在浏览器中显示粗体、较大等。然后你应该只添加不同的装饰你的设计需要。

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