如何做默认样式重置？RESETTING 和 NORMALIZING 之间有什么区别？

这里是修真院前端小课堂，每篇分享文从

【如何做默认样式重置？RESETTING 和 NORMALIZING 之间有什么区别？ 】

1.背景介绍

默认样式重置出现的原因：

目前为止，市面上的五大主流浏览器为IE、Chrome、Firefox、Safari和Opera。 当我们没有给html元素设置样式时，这5个浏览器会根据自己的默认样式对html元素进行布局，但是由于每个浏览器的默认布局样式不同， 会导致元素的展示方式出现差异，从而使同一页面在不同浏览器中的展示出现差异。使用CSS样式重置这一方式，就可以使网页展示效果保持 一致。

webkit浏览器默认样式

火狐浏览器默认样式

IE浏览器不同版本默认样式对比表

最早的一份CSS reset来自Tantek 的undohtml.css， 很简单的代码，Tantek 根据自己的需要，对浏览器的默认样式进行了一些重置。 其余一些有名的CSS reset如业界领袖Eric Meyer的reset; 或是Tripoli Reset。

2.知识剖析

什么是CSS RESET？

我们可以把它叫做CSS重设，也有人叫做CSS复位、默认CSS、CSS重置等。 CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同，导致设计师 在没有定义某个CSS属性时，不同的浏览器会按照自己的默认值来为没有定 义的样式赋值，所以我们要先定义好一些CSS样式，去“覆盖”浏览器的CSS默认属性， 来让所有浏览器都按照同样的规则解释CSS，这样就能避免发生这种问题。

CSS Reset的作用：

CSS Reset让各个浏览器的CSS样式有一个统一的基准，而实现这一基准最主要的方式就是“清零”

举例：

• { outline: 0; padding: 0; margin: 0; border: 0; }其中 * 就是常说的通配符，意思是“所有的”。使用 * 代表所有的标签或元素，就叫做通配符选择器。

由于 * 会匹配所有的元素，所以当浏览器解析到 * 时，会将页面内的所有标签都进行如上的样式重置， 这样会影响网页渲染的时间，所以使用 * 时一定要慎重，尽量不要在样式重置时应用 * 。

CSS Reset的一些方法（推荐第2、4、5篇）

目前比较全的CSS重设(reset)方法总结

HTML5 css reset

CSS工具：重置CSS

几个CSS重置默认样式reset.css代码

css重置样式表

什么是NORMALIZE？

Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上 提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css 是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被 用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具和网站上。

源码见：normalize、GitHub源码

normalize创造的目的：

保护有用的浏览器默认样式而不是完全去掉它们

一般化的样式：为大部分HTML元素提供

修复浏览器自身的bug并保证各浏览器的一致性

优化CSS可用性：用一些小技巧

解释代码：用注释和详细的文档来

RESET和NORMALIZE的区别

1. Normalize.css 保护了有价值的默认值

Reset通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。 相比之下，Normalize.css保持了许多默认的浏览器样式。这就意味着你不用再 为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时， Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合。

2. Normalize.css 修复了浏览器的bug

它修复了常见的桌面端和移动端浏览器的bug。 这往往超出了Reset所能做到的范畴。关于这一点， Normalize.css修复的问题包含了HTML5元素的显示设置、 预格式化文字的font-size问题、在IE9中SVG的溢出、许多 出现在各浏览器和操作系统中的与表单相关的bug。

3. Normalize.css 不会让你的调试工具变的杂乱

使用Reset最让人困扰的地方莫过于在浏览器调试工具中大段大段的继承链， 如下图所示。在Normalize.css中就不会有这样的问题，因为在我们的准则中 对多选择器的使用时非常谨慎的，我们仅会有目的地对目标元素设置样式。

4. Normalize.css 是模块化的

这个项目已经被拆分为多个相关却又独立的部分， 这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。 因此这能让你自己选择性地移除掉某些永远不会用到部分（比如表单的一般化）。

5. Normalize.css 拥有详细的文档

Normalize.css的代码基于详细而全面的跨浏览器研究与测试。 这个文件中拥有详细的代码说明并在Github Wiki中有进一步的说明。 这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、 浏览器之间的差异，并且你可以更容易地进行自己的测试。

总得来说，CSS Reset 是革命党，CSS Reset 里最激进那一派提倡不管你有用没用， 通通给我脱了衣服，于是 *{margin:0;} 等等运动，把人家全拍了。看似是众生平等了， 实则是浪费了资源又占不到便宜，有求于人家的时候还得给加回去，实在需要人家的默认 样式了怎么办？自己看着办吧。

Normalize.css 是改良派。他们提倡，各个元素都有其存在的道理， 简单粗暴地一视同仁是不好的。谁都有谁的作用，给他们制定个规范，确保他们 在任何浏览器里都干好自己的活儿就好了。

来源于‘知乎用户’[侵删]

3.常见问题

Question：

reset和normalize如何选用？还是直接不用？

4.解决方案

这需要以自身的需求为基点出发去选择，是个公说公有理婆说婆有理的事， 故而在此只给出一些建议：

1.如果要使用reset。则尽量不要去直接拷贝CSS reset的代码， 自己网站上没用到的不用重置，且无意义的重置不要 （比如div本不需要{margin：0；padding：0}）， 尽量保证用到的重置是高效简洁的；

2.如果要使用normalize，可以将normalize.css作为自己项目的基础CSS， 自定义样式值来满足自己的需求。(例如去掉a标签自带的下划线和p标签的自带的margin）

3.如果选择不用，可以根据自己需要的再去设置改变，或者写一段适合自己的修改默认样式的代码。

5.编码实战

Demo1：各个元素在不同浏览器中的表现形式

Demo2：用常见reset代码

Demo3：用normalize.css

6.扩展思考

到底该不该用 CSS reset？

参考知乎讨论

7.参考文献

参考一：张鑫旭-《CSS reset的重新审视 – 避免样式重置》

参考二：来，让我们谈一谈 Normalize.css

参考三：Normalize.css 与传统的 CSS Reset 有哪些区别？

8.更多讨论

讨论:应该如何做到最优的样式重置呢?

鸣谢

感谢大家观看

BY : 彭勇、胡嘉杰、万维娜、吴昊 杨梦桐|杨刚\

课后问答：

1.苹果系统用rest还是normalize好？

答：因为苹果的safri浏览器比较特殊，即使用了normalize，他跟其他浏览器的样式差别也会很大，所以建议清空。

2.那么我们平常开发建议用哪种？

答： 一般情况下，少即是好，代码量大的话，标准化〉普通〉清空，

3.标准化和清空有什么区别

答：其实两者的出发点都是一样，只不过清空更像是一个打包的通配符，他几乎清除了所有浏览器默认样式，而标准化却是改良派，只对他觉得应该改变的进行更改，