CSS reset重置样式有那么重要吗？

在以前写HTML代码的时候，一般都会在head里添加重置样式reset.css，其内容如下：

@charset "utf-8";
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,font,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 @H_404_5@{
    margin@H_404_5@: 0@H_404_5@;
    padding@H_404_5@:
    border@H_404_5@:
    outline@H_404_5@:
    font-size@H_404_5@: 100%@H_404_5@;
    /*@H_404_5@background: transparent;@H_404_5@*/@H_404_5@
}
table @H_404_5@{
    border-collapse@H_404_5@:collapse@H_404_5@;
    border-spacing@H_404_5@:0@H_404_5@;
}
fieldset,img @H_404_5@{    border@H_404_5@:0@H_404_5@;}
address,var @H_404_5@{
    font-style@H_404_5@:normal@H_404_5@;
    font-weight@H_404_5@:normal@H_404_5@;
}
ol,ul @H_404_5@{ list-style@H_404_5@:none@H_404_5@; }
caption,th @H_404_5@{ text-align@H_404_5@:left@H_404_5@; }
h1,h6 @H_404_5@{200%@H_404_5@;
:focus @H_404_5@{ outline@H_404_5@: 0@H_404_5@;}
a@H_404_5@{ text-decoration@H_404_5@:none@H_404_5@;}
a:hover img@H_404_5@{ border@H_404_5@:

a:active@H_404_5@{noOutline@H_404_5@:expression(this.onFocus=this.blur())@H_404_5@;}
清除浮动@H_404_5@*/@H_404_5@
.clearfix:after @H_404_5@{
    content@H_404_5@: "."@H_404_5@;
    display@H_404_5@: block@H_404_5@;
    height@H_404_5@:
    clear@H_404_5@: both@H_404_5@;
    visibility@H_404_5@: hidden@H_404_5@;
}
.clearfix @H_404_5@{display@H_404_5@: inline-block@H_404_5@;}
 Hides from IE-mac \@H_404_5@
* html .clearfix @H_404_5@{ height@H_404_5@: 1%@H_404_5@;} block@H_404_5@;}
 End hide from IE-mac @H_404_5@*/@H_404_5@

png css hack for ie6@H_404_5@
*html img.png@H_404_5@{
    _background-image@H_404_5@: expression(this.runtimeStyle.backgroundImage = "none",this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "',sizingMethod='image')",this.src = "http://i0.itc.cn/20101019/848_0a785a7b_1118_4825_85dc_e8696988c94b_0.gif")@H_404_5@;
}

但是最近在网上看了看网络文章，也感觉有些重置是没有用的。为什么呢？

重置的作用究竟是什么？

CSS reset的作用是让各个浏览器的CSS样式有一个统一的基准，而这个基准更多的就是“清零”！

有时候看到别人网站站的一些重置是这样的：

*@H_404_5@{ margin@H_404_5@:0@H_404_5@; padding@H_404_5@:0@H_404_5@; }

这样的写法是极不推荐的。

现在来看重置表发现：

1. div标签默认有margin值吗？有padding值吗？怎么会想到应用div{margin:0; padding:0;}属性呢？答案肯定没有。
2. dt标签有默认的margin与padding值就是0，什么还要使用呢？
3. li标签默认有margin值吗？有padding值吗？没有！
4. code标签是个属于inline水平的元素，居然也扯到margin与padding的重置，没有必要。
5. fieldset,legend这两个90年代的标签你的网站上使用了吗？使用概率不足1%的标签也拿来重置，也没必要。

css真的重置也就那么几个常用的标签而已，你的页面一般都用到什么标签？

body,form@H_404_5@{margin@H_404_5@: 

 ol,ul@H_404_5@{0@H_404_5@;}

这样的CSS reset才是高效的，简洁的，其他一些标签都可以去掉的，没有必要。

当然css重置的优点，缺点都不说了，估计心里都非常有数的，还是要根据实际项目来。

后来主管给我推荐了一款替代reset.css重置的替代方案，那就是用Normalize.css@H_404_5@。在后面文章里把它的用法等再列出来。

CSS reset重置样式有那么重要吗？

猜你在找的HTML相关文章