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。