css重置

CSS 重置

现在我们已经知道了，某些元素即使我们不对它声明样式，浏览器也会有些默认的样式，如 h1、p。

那么问题来了，浏览器有那么多（Chrome，Firefox，IE 等），每个浏览器的默认样式是否一致呢？

很可惜，这个答案是否定的， 各个浏览器的默认样式可参考：浏览器默认样式参考指南。上面罗列的是IE6-9，可以滚到最下面查看其他浏览器的。

纠正重置

由于各个浏览器的默认样式有些差异，所以我们开始 CSS 的第一步应该是要消除这些差异，让表现一致。毕竟我们的最终目标就是得给用户看到一致的页面，不论用户使用什么浏览器。

这方面我们有开源的normalize.css，它就是为了消除各个浏览器默认样式之间的差异而生的，如它重设了 h1 的样式，让各个浏览器表现一致：

/**

* 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.67em0;}

当然源码有很多，不过好在每条都有注释，所以查阅理解起来也比较方便。如你现在不太理解这些样式，以后再来仔细研究也是可以的。

清零重置

虽然我们通过 normalize.css 消除了各浏览器默认样式的差异，但是我们日常开发中也有些不需要浏览器的默认样式的（毕竟默认的样式还是比较粗糙的），这样就构成了我们第二次的重置——清零重置。

如一些元素的 margin ，我们实际排版的时候都是跟着设计稿效果图走的，这种默认外边距反而有点碍事，所以先清为零：

h1,h2,h3,h4,h5,h6,p,figure,form,blockquote{margin:0;}ul,ol,li,dl,dd{margin:0;padding:0;}ul,ol{list-style: none outside none;}

又如列表类元素，实际使用中，我们几乎不需要前面的那个 list-style-type（圆点或数字等）所以也得清除掉：

ul,ol,li,dl,dd{margin:0;padding:0;}ul,ol{list-style: none outside none;}

再如 table，网页上的表格边框几乎全是合并处理的，而且单元格的内边距还得根据内容的多少来具体设置，所以也得先设置下，方便以后好用：

table{border-collapse: collapse;border-spacing:0;}td,th{padding:0;}

除此之外，比喻设置所有元素的 box-sizing 都为 border-box，提供一个全局的 clearfix 类等等。

* {box-sizing: border-box;}.clearfix::before,.clearfix::after{content:"";display: table;}.clearfix::after{clear: both;}

总结

总得来说css重置分为纠正重置及归零重置

纠正重置代表为：normalize.css

归零重置的代表为：Eric Meyer’s “Reset CSS” 2.0

如果你想省事的话直接引入normalize.css，然后再进行部分归零重置；如果深入研究可以把两个揉合一起，可参考Sandal reset。