关于css 的reset

再来看看p的默认值

再来看看p的默认值marggin:16px;但是从这两段中可以看到浏览器的一个bug,就是有margin-bottom和下一个元素有margin-top时，发生折叠

以下文章转自http://www.xprogrammer.com/927.html

其实大部分CSS reset是没必要的，多写了只会增加浏览器在渲染页面是的负担，当然有同学会说CSS reset还是有其意义的，这个我也承认，但是我们可以通过了解一些标签的CSS属性的默认值来避免过度的reset。

标签属性默认值

由于大部分的CSS reset都是针对padding、border、margin，我们就先看看常用标签的这三个属性的默认值（Chrome）。

标签	padding	border	margin
html	0	0	0
body	0	0	8
form	0	0	0
div	0	0	0
span	0	0	0
p	0	0	16
th、td	1	0	0
input(text、password)	1	2	2
input(checkbox、radio)	0	0	3 0.5ex
input button	8	0	2
textarea	2	1	2
select	0	0	2
option	0	0	0
h1~h6	0	0	?px 0
ul、ol	0 0 0 40px	0	16px 0
li	0	0	0
dl	0	0	16px 0
dt	0	0	0
dd	0	0	0 0 0 40px
label	0	0	0
em、strong	0	0	0
label	0	0	0
img	0	0	0
a	0	0	0

虽然只是在Chrome下，但通过上面表可以看出很多标签默认的padding、border、margin就是0，如果还在CSS reset中写一遍岂不是画蛇添足了，除了浏览器的默认值，还有一些标签的属性值得我们注意。

行内元素的width、height、padding、margin

1. 行内元素不会应用width属性，其长度是由内容撑开的；
2. 行内元素不会应用height属性，其高度也是由内容撑开的，但是高度可以通过line-height调节；
3. 行内元素的padding属性只用padding-left和padding-right生效，padding-top和padding-bottom会改变元素范围，但不会对其它元素造成影响；
4. 行内元素的margin属性只有margin-left和margin-right有效，margin-top和margin-bottom无效；
5. 行内元素的overflow属性无效，这个不用多说了；
6. 行内元素的vertical-align属性无效（height属性无效）。

看个例子：

<div style="background-color: #a44;">
    <span style="padding:4px; margin:8px; height: 500px; width:1000px; background-color:#0e0;">123456789123456789</span>
</div>
<div style="background-color: #a44;">
  <span style="padding:4px; margin:8px; height: 500px; width:1000px; background-color:#0a0;">123456789</span>
</div>

通过例子可以看出，我们对span设置的width和height属性并没有生效，margin-top和margin-bottom无效，padding-top和padding-bottom会改变元素范围（背景区域变大了），但并没有影响下面元素位置。

在CSS reset中我们不应该设置对行内元素无效的属性。

一些互斥的属性

对于absolute和fixed定位的元素，如果设置了top和left属性，那么设置bottom和right值就没有作用了，应该是top和left优先级高，否则同时写了浏览器怎么知道按照谁定位。

对于absolute和fixed定位的元素，如果设置了top、left、bottom、right的值后margin属性也就不起作用了。

对于absolute和fixed定位的元素，如果设置了top、left、bottom、right的值后float属性同样会失效。

块元素如果设置了float属性或者是absolute、fixed定位，那么vertical-align属性不再起作用。

其它

常规情况下块元素的width:100%，pre等很少用到的元素，个人感觉用的时候再页面写就可以，没必要加到reset中，让所有页面都去加载。

看一下CSS reset大神Eric Meyer的写法：

/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
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;
}

写的很精简了，但是我感觉可以把一些不常用的标签去掉，缩写成这样：

html, body, div, span, iframe,
h1, h2, h3, h4, h5, h6, p, a, 
del, dfn, em, img,
small, strong,
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, section, summary
 {
    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;
}

如果对CSS reset有兴趣可以看看http://www.cssreset.com/，上面有很多流行的CSS reset写法。