大家好，我是IT修真院北京分院第21期的学员杨梦桐，今天的这篇文章，主要关于浏览器样式的重置。
到目前为止，市面上的五大主流浏览器为IE、Chrome、Firefox、Safari和Opera。当这些浏览器在载入html文件的时候，如果我们没有给html元素设置样式，浏览器会基于自己的默认样式对其中的一些标签进行页面布局，但是由于浏览器的默认样式不同，所以会导致实现页面布局的方式不同。比如有一些浏览器通过margin实现内容的间距，而另一些浏览器通过padding实现。而且例如如滚动条，按钮，选择框等元素的默认CSS样式，也不近相同。这样就导致同一个页面在不同浏览器载入后显示的效果不同。为了尽可能避免这种情况，我们可以通过使用CSS样式重置这一方式，使网页展示效果保持一致。
以下是一些浏览器的默认样式，从中甚至可以看出，同一浏览器的不同版本也会有一些样式差异。
webkit浏览器默认样式：https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
火狐浏览器默认样式：https://hg.mozilla.org/mozilla-central/file/tip/layout/style/res/html.css
IE浏览器不同版本默认样式对比表：http://developer.doyoe.com/default-style/
最早的一份CSS reset来自Tantek的undohtml.css，很简单的代码，Tantek 根据自己的需要，对浏览器的默认样式进行了一些重置。其余一些有名的CSS reset有业界领袖Eric Meyer的reset或是Tripoli Reset。现在，基于完美的实现页面在不同浏览器的显示这一需求，CSS重置这一方式被普遍地运用在页面布局中。
首先，我们来了解一下CSS reset。
1. 什么是CSS Reset？
我们可以把它叫做CSS重设，也有人叫做CSS复位、默认CSS、CSS重置等。CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同，导致设计师在没有定义某个CSS属性时，不同的浏览器会按照自己的默认值来为没有定义的样式赋值，所以我们要先定义好一些CSS样式，去“覆盖”浏览器的CSS默认属性，来让所有浏览器都按照同样的规则解释CSS，这样就能避免发生这种问题。
2.如何实现CSS Reset？
CSS Reset的目的是让各个浏览器的CSS样式有一个统一的基准，而实现这一基准最主要的方式就是“清零”，即将所有的默认样式直接清除。最简单的方法是直接使用
* {
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
其中 * 就是常说的通配符，意思是“所有的”。使用 * 代表所有的标签或元素，就叫做通配符选择器。由于 * 会匹配所有的元素，所以当浏览器解析到 *时，会将页面内的所有标签都进行如上的样式重置，这样会影响网页渲染的时间，所以使用 * 时一定要慎重，尽量不要在样式重置时应用 * 。
除了CSS reset之外，还有一种样式重置的方式就是使用Normalize.css。Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks以及许许多多其他框架、工具和网站上。我们可以在这里查看它的源码：https://github.com/necolas/normalize.css，关于源码的中文注释，可以查看：http://www.cnblogs.com/shrekuu/archive/2013/06/06/normalize-cn.html
相较CSS reset，Normalize有一些自己的优势。
1. Normalize.css没有重置所有的属性，所以一些默认公用的属性无需自己再手动添加。
2. Normalize.css修复了浏览器的bug，修复的问题包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。
3. Normalize.css避免了浏览器调试工具中的大段继承链，
4. Normalize.css 是模块化的并且拥有详细的文档，方便进行自己的测试。
如果需要进行浏览器的默认样式重置，则可以根据自己的需要进行设置，或者写一段适合自己的修改默认样式的代码。要避免无意义的重置，尽可能让自己的代码简洁有效优化好。
参考文献
张鑫旭-《CSS reset的重新审视 – 避免样式重置》：http://www.zhangxinxu.com/wordpress/2010/04/css-reset%E7%9A%84%E9%87%8D%E6%96%B0%E5%AE%A1%E8%A7%86-%E9%81%BF%E5%85%8D%E6%A0%B7%E5%BC%8F%E9%87%8D%E7%BD%AE/
来，让我们谈一谈 Normalize.css：http://jerryzou.com/posts/aboutNormalizeCss/
Normalize.css 与传统的 CSS Reset 有哪些区别？：https://www.zhihu.com/question/20094066/answer/25004727
PPT ：https://ptteng.github.io/PPT/PPT/css-71-CSS_Reset&Normalize.html#/
视频链接：https://v.qq.com/x/page/d0518tdfd5t.html
网友评论