css reset重置样式有那么重要吗?_html/css_WEB-ITnose

php中文网
发布: 2016-06-24 11:36:55
原创
1282人浏览过

在以前写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 {    margin: 0;    padding: 0;    border: 0;    outline: 0;    font-size: 100%;    /*background: transparent;*/}table {    border-collapse:collapse;    border-spacing:0;}fieldset, img {    border:0;}address, caption, cite, code, dfn, em, strong, th, var {    font-style:normal;    font-weight:normal;}ol, ul { list-style:none; }caption, th { text-align:left; }h1, h2, h3, h4, h5, h6 {    font-size:200%;    font-weight:normal;}:focus { outline: 0;}a{ text-decoration:none;}a:hover img{ border:none;}a:active{noOutline:expression(this.onFocus=this.blur());}/*清除浮动*/.clearfix:after {    content: ".";    display: block;    height: 0;    clear: both;    visibility: hidden;}.clearfix {display: inline-block;}/* Hides from IE-mac \*/* html .clearfix { height: 1%;}.clearfix {display: block;}/* End hide from IE-mac *//*png css hack for ie6*/*html img.png{    _background-image: 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");}
登录后复制

 

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

重置的作用究竟是什么?

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

立即学习前端免费学习笔记(深入)”;

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

*{ margin:0; padding:0; }
登录后复制

 

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

 

现在来看重置表发现:

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, dl, dd, h1, h2, h3, h4, h5, h6, p, form{margin:0;}  ol,ul{margin:0; padding:0;}
登录后复制

 

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

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

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

 

作者:风雨后见彩虹

出处:http://www.cnblogs.com/moqiutao/

如果您觉得本文对您的学习有所帮助,请多支持与鼓励。

 

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号