浏览器默认样式
理解CSS Reset的重要性及选择适当的方法
一、CSS Reset的原因
在网页开发中，CSS Reset扮演着举足轻重的角色。它的主要目的是消除浏览器默认样式对网页布局的影响，确保各浏览器中的样式表现一致。熟悉CSS Reset，是每位前端开发者必须掌握的技能之一。
二、“一刀切”做法的局限性
当我们谈论CSS Reset时，“{margin:0;padding:0;}”这种一刀切的做法往往被提及。这种做法并不被所有开发者所推崇。原因是，并非所有浏览器默认样式都需要被重置。例如，部分标签原本就没有margin或padding。一些较少使用的标签，即使需要重置，也通常会有特殊定制的需求。简单的全局重置可能会导致不必要的样式覆盖，增加开发难度和维护成本。
三、广泛流传的CSS Reset的争议
网上流传的CSS Reset方案众多，各有优劣。一些人认为某些流行的CSS Reset方案过于繁琐，包含了不必要的重置规则。实际上，只需针对常用的标签进行按需重置即可。例如，针对常见的布局元素和应用广泛的标签进行样式重置：
代码示例：
body, p, dl, dd, h1, h2, h3, h4, h5, h6, form { margin: 0; }
ul, ol, input, fieldset { margin: 0; padding: 0; }
ul, ol { list-style-type: none; }
img { border: 0; }
option, em { font-style:normal }
a { text-decoration: none; color: c9c9c9; }
a:hover { text-decoration: underline; color: 31c8e1; }
四、深入理解浏览器默认样式
为了更好地理解并控制网页在浏览器中的表现，了解浏览器的默认样式至关重要。对于WebKit浏览器（如Chrome和Safari），可以通过查看默认样式表来了解浏览器对HTML元素的默认样式处理。例如，当input元素被选中时，Chrome会为其添加一圈黄色边框。为了消除这种默认样式，可以通过重置input和textarea的样式来实现：
代码示例：
input, textarea { outline:none; }
textarea { resize:none; } // 去除textarea的默认大小拖动功能
至于其他浏览器的默认样式，如IE、Firefox等，则需要通过相应的方法查看其默认样式表。对于Firefox，可以通过访问resource://gre/res/html.css来查看默认样式，但此方法可能仅适用于4.0之前的版本。对于更高版本的Firefox以及其他浏览器如WebKit和Opera，查看默认样式的方法可能需要进一步的研究和。
深入理解CSS Reset的原因和目的，掌握按需重置的技巧，以及了解浏览器的默认样式，是每位前端开发者不断提升自身技能的重要部分。