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 ...
随机推荐
- 【洛谷 p3382】模板-三分法(算法效率)
题目:给出一个N次函数,保证在范围[l,r]内存在一点x,使得[l,x]上单调增,[x,r]上单调减.试求出x的值. 解法:与二分法枚举中点使区间分成2份不一样,三分法是枚举三分点,再根据题目的情况修 ...
- HTML5中的音视频处理
* 音视频处理 * 视频处理 * 基本内容 * 使用Flash技术处理HTML页面中的视频内容 * 包含音频.动画.网页游戏等 * 特点 * 浏览器原生不支持(IE浏览器要求安装ActiveX组件) ...
- MUI - 将tap模拟成原生click体验
mui提供了tap事件替换了html5的click事件,解决了300ms延时的问题.不过相比原生app的click体验还是有些许差距的.关于300ms延时的问题,这篇帖子分析的比较完善,其中提到了穿透 ...
- AJAX请求中含有数组解决办法
当我们发送AJAX请求的数据中带有数组时,是不能像普通JSON数据一样,直接放在data里发送给后台,比如有这样一个数据需要发送给后台: { "orderId": 22, &quo ...
- ASP.NET验证码生成与识别
一般验证码页面只输出一个图片而不进行其他业务处理,所以验证码一般放在一般处理程序(httpHandler)页面中,而如果将验证码生成代码放到一般处理程序中,要将生成验证码保存在Session中,这里我 ...
- CSS 属性 - 伪类和伪元素的区别
伪类和伪元素皆独立于文档结构.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).区别总结如下: ①写法不一样: ...
- Smartforms常见问题
分类: 1.使用SFSY-FORMPAGES显示总页数的时候,如果页数大于9,将会在前10页显示成星号* 解决: 有时候这样做完之后,星号*是没有了,但是字体会有颠倒或者重叠的现象. 如果出了这个问题 ...
- centOS 安装 svnserve
安装说明 系统环境:CentOS-6.3安装方式:yum install (源码安装容易产生版本兼容的问题)安装软件:系统自动下载SVN软件 检查已安装版本 ? 1 2 3 4 5 6 7 8 9 1 ...
- 我在用的mac软件(1)--终端环境之iTerm2
之前一直有朋友要我分享下在用的mac软件,今天有空就来写一下,可能不止于软件,会有一些配置或者工具,或者叫环境更合适.有些可能一句话带过,有些会详细介绍.也不分类了,想到哪个就写出来.如果已经写的足够 ...
- SparseArray<E>详解
SparseArray<E> 是官方推荐的用来替代 HashMap<Integer, E> 的一个工具类,相比来说有着更好的性能(其核心是折半查找函数(binarySearch ...