理解CSS重置样式表

在我们创建好基本的HTML网页结构后，即使你没有写过任何的css样式代码，你也会发现已经有一些默认的css对HTML文档应用了样式。比如说“主体”（写在body里的）内容与浏览器的边框之间有一定的边距；标题元素的默认字体大小和字体粗细；有序、无序列表的默认样式（项目符号）。这些默认的样式全部来源于浏览器本身，而每个浏览器提供的默认样式还略有不同，为了让我们编写的网页在每个浏览器中都能大概显示相同，很多开发人员开发了重置样式（css reset），这意味着可以通过重新设置通用的属性将浏览器的默认属性去掉，继而减少浏览器之间的不一致性。

现在最流行的CSS重置样式表之一就是位于www.meyerweb.com/eric/tools/css/reset的一份样式表如下。

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

针对这个重置样式表中可以遇到的一些疑问做简单说明如下：

1、为什么不直接用通用选择器（*）来设置如下而要写这么多元素选择器

*{
margin:0;
padding:0;
border:0;
font-size:100%;
font:inherit;
vertical-align:baseline;
}

答：因为如果用通用选择器的话，那么这些规则就会应用到HTML文档中的所有元素上，包括像文本输入框和下拉选择框这种表单元素。由于目前不同浏览器处理表单元素样式的方法不尽相同，这种“全部元素”的方式就意味着在减少浏览器差异时表单元素的表现会变得很不一致。

2、设置font-size为100%是什么意思？

答：默认情况h1、h2、h3、h4、h5、h6的字体大小被设置为200%，150%，120%，100%，90%，60%它们是根据基准字体大小（一般是16px）然后乘以百分数得来得，将其设为100%刚好就是基准字体大小，也就是使网页中的字体都一样大。

3、line-height设置为1，可以设置为100%吗？

答：不可以，如果你在父元素中设置了line-height为100%，如果你的字号设置为16px，那么行高值就是16px，这个行高值会被后代元素继承而与后代元素的字号无关，这常常会把我们搞的头昏眼花，尤其在嵌套比较多的情况下。如果你设置为1，那么你传给后代元素的就是一个换算系数，这样每次换算出来的行高值事实上就是字号大小。这样在设置行高的时候就方面多了。

4、font属性设置为inherit。

inherit。规定应该从父元素继承字体。这里包括字体样式，字体尺寸等等。这里有个很好的例子，假设我们将body中的字体大小设置为63.5%，以基准字体大小（16px）来算那么就等于10px，body中的这些元素会基础10px的字体大小，你以后设置时就可以以10px为基准来设置网页中元素的字体大小，比如设置一个段落的字体为1.3em事实上就是设置其为13px。

5、下面这段代码意思就是去除有序、无序列表中的项目符号，以后你在设置列表时就不会再出现项目符号了。

ol, ul {
list-style: none;
}

有问题或者补充的一定及时说明和更正。