关于css-reset的浅认识
最近在回顾一些过往的知识，想到css-reset的时候，觉得是时候梳理一下这里面的一些个人看法和知识隐藏点，可能不够全面，但是一些总结还是有必要的。
我们都知道，在前端开发的过程中，我们经常要碰到清除浏览器的默认样式，这个时候我们脑子里就有一个概念，那就是css-reset这个必须的出现。然而我发现在这默认样式清除的情况下，我们有时候都没有去想到底浏览器有哪些默认的样式呢？为了证明自己的一些想法，我特意去审查了一下一些标签的默认样式，现在总结如下
body{
margin:8px;
}
p,dl{
margin: 16px 0 ;
}
h1{
margin:21.4333px 0 ; /*最终测试精确到...*/}
h2{
margin:19.9167px 0;}
h3{
margin:18.7167px 0;}
h4{
margin:21.2833px 0;}
h5{
margin:22.1833px 0;}
h6{
margin:24.9667px 0;}
ol,ul{
margin:16px 0; padding:0 40px;}
dl dd{
margin-left:40px;}
还有一些诸如a标签的默认下划线样式，标题标签h1-h6每个都有默认的样式外边距，不多说上图：
这样我们简单的总结了HTML中一些常见标签在浏览器的默认样式，这样我们为了方便以后在工作中受到这些默认样式的影响，我们必须把这些样式清除掉，于是CSS-RESET就出来了：
body,p,h1,h2,h3,h4,h5,h6,dl,dd{
margin:0;
font-size:12px;
/*font-family:XX;*/
}
ol,ul{
list-style:none;
padding:0;
margin: 0;
}
a{
text-decoration:none;
}
img{
border: none;
}
在我用ie tester测试的时候发现我的工具出现错误，所以不能正确截图说明IE6下与火狐浏览器下的样式差异性，各位可以自己在IE6下进行测试。
其中需要说明的情况如下：
1）两种浏览器下的字体大小，即font-size不一样，所以我们在上面的CSS代码部分重置了一下它的默认属性。同时字体上我们在各个浏览器上也不一样，虽然我们默认的是宋体，但是有时候我们会用到诸如 Microsoft 的字体样式；
2）IE6下默认的以img标签图片2.png作为a链接内容的时候出现了一个默认的外边框，所以我们清除了它的边框。
文章最后附上本次的测试文件供大家参考
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>css-reset的背后的一些浅析</title>
6 <style>
7 body{
8 height: 1000px;
9 border: 1px solid red ; /*方便查看浏览器默认样式*/
10 }
11 </style>
12 </head>
13 <body>
14 <a href="#">a标签（链接，下载，锚点）</a>
15 <img src="2.JPG" alt="美女">
16 <a href="#"><img src="2.JPG" alt="美女链接"></a>
17 <br>
18 <span>区分样式的文本标记</span>
19 <br>
20 <strong>强调粗体</strong>
21 <br>
22 <em>斜体</em>
23 <p>段落</p>
24 <div>块</div>
25 <h1>标题1</h1>
26 <h2>标题2</h2>
27 <h3>标题3</h3>
28 <h4>标题4</h4>
29 <h5>标题5</h5>
30 <h6>标题6</h6>
31 <ol>
32 <li>有序列表项1</li>
33 <li>有序列表项2</li>
34 <li>有序列表项3</li>
35 </ol>
36 <ul>
37 <li>无序列表项1</li>
38 <li>无序列表项2</li>
39 <li>无序列表项3</li>
40 </ul>
41 <dl>
42 <dt>定义列表标题</dt>
43 <dd>定义列表项1</dd>
44 <dd>定义列表项2</dd>
45 <dd>定义列表项3</dd>
46 </dl>
47 </body>
48 </html>
说明：以上测试是在火狐浏览器，关于标题标签部分默认样式的margin值可能不一样，这里只是说明它有这些默认的样式而已。