博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS基础篇--css reset重置样式有那么重要吗?
阅读量:6303 次
发布时间:2019-06-22

本文共 2110 字,大约阅读时间需要 7 分钟。

在以前写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%;}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;} html .clearfix { height: 1%;}.clearfix {display: block;}*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标签有默认的marginpadding值就是0,什么还要使用呢?
  3. li标签默认有margin值吗?有padding值吗?没有!
  4. code标签是个属于inline水平的元素,居然也扯到marginpadding的重置,没有必要。
  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://ozbxa.baihongyu.com/

你可能感兴趣的文章
SQL Server 性能调优(性能基线)
查看>>
uva 10801 - Lift Hopping(最短路Dijkstra)
查看>>
[Java Web]servlet/filter/listener/interceptor区别与联系
查看>>
POJ 2312Battle City(BFS-priority_queue 或者是建图spfa)
查看>>
从零开始学MVC3——创建项目
查看>>
CentOS 7 巨大变动之 firewalld 取代 iptables
查看>>
延时任务和定时任务
查看>>
linux下的权限问题
查看>>
教你如何使用Flutter和原生App混合开发
查看>>
Spring Boot 整合redis
查看>>
CSS hover改变背景图片过渡动画生硬
查看>>
JDBC(三)数据库连接和数据增删改查
查看>>
淘宝应对"双11"的技术架构分析
查看>>
ssh
查看>>
订单的子单表格设置颜色
查看>>
Office365 Exchange Hybrid 番外篇 ADFS后端SQL群集(一)
查看>>
9个offer,12家公司,35场面试,从微软到谷歌,应届计算机毕业生的2012求职之路...
查看>>
lvs fullnat部署手册(三)rs内核加载toa篇
查看>>
C++策略模式
查看>>
我的友情链接
查看>>