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.67em 0;
}

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

清零重置

虽然我们通过 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。