今天给大家分享：
【CSS-task13】如何做默认样式重置？resetting 和 normalizing 之间有什么区别？
分享人：聂义中
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
1.背景介绍
通常情况下，主流浏览器会自带一些元素的样式来保证当用户不对一些元素设置样式的情况下让页面布局合理，
但是由于每个浏览器的默认元素样式不同，会导致页面元素在不同的浏览器上的展示方式出现差异，而且有时候我
们不想按照浏览器的默认样式来进行布局，这样就产生了CSS样式重置这一方式，它的目的就是使网页在不同浏览器上
展示效果保持一致，同时还符合我们对页面的布局要求。
2.知识剖析
什么是CSS Reset？
在HTML标签在浏览器里有默认的样式，例如 p 标签有上下边距，
strong标签有字体加粗样式，em标签有字体倾斜样式。不同浏览器的默认样式之
间也会有差别，例如ul默认带有缩进的样式，在IE下，它的缩进是通过margin实现的，
而Firefox下，它的缩进是由padding实现的。在切换页面的时候，浏览器的默认样式
往往会给我们带来麻烦，影响开发效率。所以解决的方法就是一开始就将浏览器的默
认样式全部去掉，更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。
最最简单的说法就是把浏览器提供的默认样式覆盖掉！这就是CSS reset。
最简单的css reset
* {
padding: 0;
margin: 0;
}
“ * ”代表所有的标签或元素，就叫做通配符选择器。这代表这段代码会匹配所有的元素，为所有元素添加样式，所以当浏览器解析到 * 时，会将页面内的所有标签都进行如上的样式重置，就是让他们的padding margin都为0，这就相当于完全清除了浏览器的padding margin默认样式。但是，有很多的元素我们可能在页面中用不到，或者我们可以用他的默认样式，全部重置一遍的话会白白增加网页渲染的时间，减慢网页加载速度，所以使用 * 时一定要慎重，尽量不要在样式重置时应用 * 。
各大网站的一些css reset
淘宝
土豆
搜狐
可以看出，我们写css reset的时候，主要是要根据我们对网页的需求而来的，我们需要用到哪些标签，
当我们所用到的那些标签的默认样式也我们期望的不符的时候，有或者是在不同浏览器下元素的默认样式不同
而让我们的页面在不同的浏览器下显示不同的布局而不符合我们的预期，我们就在css reset为这些元素重置它
的样式来达到我们的要求。
什么是Normalize？
Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上
提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css
是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被
用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks
以及许许多多其他框架、工具和网站上。
normalize创造的目的：
1 保护有用的浏览器默认样式而不是完全去掉它们
2一般化的样式：为大部分HTML元素提供
3修复浏览器自身的bug并保证各浏览器的一致性
4优化CSS可用性：用一些小技巧
5解释代码：用注释和详细的文档来
3.常见问题
reset和normalize的区别
4.解答
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中有进一步的说明。
这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、
浏览器之间的差异，并且你可以更容易地进行自己的测试。
5.编码实战
6.扩展思考
reset和normalize如何选用？
1.如果要使用reset。则尽量不要去直接拷贝CSS reset的代码，
自己网站上没用到的不用重置，且无意义的重置不要
（比如div本不需要{margin：0；padding：0}），
尽量保证用到的重置是高效简洁的；
2.如果要使用normalize，可以将normalize.css作为自己项目的基础CSS，
自定义样式值来满足自己的需求。(例如去掉a标签自带的下划线和p标签的自带的margin）
3.符合自己需求的才是最好的，根据你的页面需要,参考reset normalizing 书写自己的样式重置代码是最好的，
不要盲目的去用css reset 或者 normalize.css。
7.参考文献
参考二：Normalize.css 与传统的 CSS Reset 有哪些区别？
8.更多讨论
你是如何做默认样式重置的？
by聂义中
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
