关于CSS-RESET的浅析和个人理解

来源：互联网发布：2017中超球员数据编辑：程序博客网时间：2024/06/08 09:04

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　关于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值可能不一样，这里只是说明它有这些默认的样式而已。

阅读全文

0 0