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 {
margin:;
padding:;
border:;
outline:;
font-size: 100%;
/*background: transparent;*/
}
table {
border-collapse:collapse;
border-spacing:;
}
fieldset, img { border:;}
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:;}
a{ text-decoration:none;}
a:hover img{ border:none;} a:active{noOutline:expression(this.onFocus=this.blur());}
/*清除浮动*/
.clearfix:after {
content: ".";
display: block;
height:;
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:; padding:; }
这样的写法是极不推荐的。
现在来看重置表发现:
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:;}
ol,ul{margin:; padding:;}
这样的CSS reset才是高效的,简洁的,其他一些标签都可以去掉的,没有必要。
当然css重置的优点,缺点都不说了,估计心里都非常有数的,还是要根据实际项目来。
后来主管给我推荐了一款替代reset.css重置的替代方案,那就是用Normalize.css。在后面文章里把它的用法等再列出来。
css reset重置样式有那么重要吗?的更多相关文章
- CSS RESET —— 浏览器样式重置
CSS Reset 1. CSS Reset为什么存在? 只要您的客户存在使用不同浏览器(ie,firefox,chrome等)的可能,那你就不得不从完美的理想状态回到现实,因为不同核心的浏览器对CS ...
- CSS Reset(样式重置)
CSS Reset,意为重置默认样式.HTML中绝大部分标签元素在网页显示中都有一个默认属性值,通常为了避免重复定义元素样式,需要进行重置默认样式(CSS Reset).举几个例子:1.淘宝(CSS ...
- css网页重置样式表(多版本)
Eric reset.css html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, ...
- css reset初始化样式
原文:https://www.cnblogs.com/caojiayan/p/6343917.html /* CSS Document */ html, body, div, span, object ...
- css reset的重置作用(可取还是不可取,取决于你)
一.重置的理由 当今流行的浏览器中,有些都是以自己的方式去理解css规范,这就会到只有的浏览器对css的解释与设计师的css定义初衷相冲突,使得网页的样子在某些浏览器下能正确按照设计师的想法显示.,但 ...
- 重置浏览器的默认样式(css reset)
(1)定义:首先css reset指的是重置浏览器的默认样式 (2)作用:因为现在的浏览器很多,并且每个浏览器都有自己的默认样式,这样就会导致一个页面在多个浏览器下展示产生差异,所以我们需要做一些处理 ...
- 重置默认样式 css reset
html { overflow-x:auto; overflow-y:scroll; } body, dl, dt, dd, ul, ol, li, pre, form, fieldset, inpu ...
- CSS Reset样式重置
为了让页面在各不同浏览器之间显示效果一致,CSS样式清除和重置是前端开发必需要做的事情,结合前车之鉴,整理了份CSS重置样式代码供参考. @charset "utf-8"; /* ...
- CSS Reset / Normalize 如何进行样式重置
CSS Reset 过于激进,所有样式全部消除没有必要. 关键是保持各种浏览器的兼容,包括Bootstrap的CSS Reset也是走的这个路线. 线面这个就是后面一种思路的成果: http://ne ...
随机推荐
- IIS减少工作线程阻塞的方法
IIS的工作进程(w3wp.exe)只提供了有限的工作线程(Work Thread)来处理请求.如果这些线程都因为要等待长时间运行的任务而阻塞,则运行时会将新来的请求排队,而不是立即执行,Web服务器 ...
- Eclipse下Android开发的问题:Installation error: INSTALL_FAILED_NO_MATCHING_ABIS 解决办法
在Android模拟器上安装apk的时候出现 INSTALL_FAILED_NO_MATCHING_ABIS 这个错误提示的解决办法. 是由于使用了native libraries .该nativ ...
- [模仿][JS]新浪财经7*24直播
使用新浪财经7*24直播的数据 简单的做一个山寨品 在线地址:[痛苦啊,有GFW,却没有vpn,往heroku上传浪费了好多时间...] http://wangxinsheng.herokuapp.c ...
- gulp入坑系列(3)——创建多个gulp.task
继续gulp的爬坑路,在准备get更多gulp的具体操作之前,先来明确一下在gulp中创建和使用多个task任务的情况. gulp所要做的操作都写在gulp.task()中,系统有一个默认的defau ...
- C语言位运算详解
位运算是指按二进制进行的运算.在系统软件中,常常需要处理二进制位的问题.C语言提供了6个位操作运算符.这些运算符只能用于整形操作数,即只能用于带符号或无符号的char.short.int与long类型 ...
- js验证真实姓名与身份证号,手机号
最近的项目中用的需要调用实名认证的接口,实名认证接口价格相比短信而言高了不是几分钱,所以说调用实名认证的条件就要严格把关,因此用到js验证真实姓名与js验证身份证号. 进入正题 1.js验证真实姓名 ...
- Atitit. Xss 漏洞的原理and应用xss木马
Atitit. Xss 漏洞的原理and应用xss木马 1. XSS漏洞1 2. XSS的用途2 2.1. 盗取cookie2 2.2. 刷新流量 刷分3 2.3. DOS 窃取隐私”.“假冒身份”. ...
- SharePoint 2013 Installation and Configuration Issues
# Issue 1: During Installing SharePoint 2013 Prerequisites there was an error in installing Applicat ...
- swift基础一
// swift中导入类库使用import,不再使用<>和"" import Foundation // 输出 print("Hello, World!&qu ...
- 原生JS获取各种高度宽度、浏览器窗口滚动条的位置、元素的几何尺寸名
1)关于 pageX, clienX,offsetX,layerX pageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化 clientX:鼠标在页面上可视区域的位 ...