CSS基础篇--css reset重置样式有那么重要吗？

rockswang 发布于2019-08-28 18:16 / 3467人阅读

摘要：在以前写代码的时候，一般都会在里添加重置样式，其内容如下但是最近在网上看了看网络文章，也感觉有些重置是没有用的。当然重置的优点，缺点都不说了，估计心里都非常有数的，还是要根据实际项目来。后来主管给我推荐了一款替代重置的替代方案，那就是用。

在以前写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; }

这样的写法是极不推荐的。
现在来看重置表发现：

div标签默认有margin值吗？有padding值吗？怎么会想到应用div{margin:0; padding:0;}属性呢？答案肯定没有。

dt标签有默认的margin与padding值就是0，什么还要使用呢？

li标签默认有margin值吗？有padding值吗？没有！

code标签是个属于inline水平的元素，居然也扯到margin与padding的重置，没有必要。

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。在后面文章里把它的用法等再列出来。

GPU云服务器云服务器 reset.css css样式页面css样式 css的样式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111138.html

CSS学习笔记(十六) CSS最佳实践之可维护性篇

摘要：国内各大公司都已经投入使用，在一些常见的网站，如淘宝腾讯小米等移动站点，随处可见其踪影。变革之腾讯手机淘宝的设计与实现前端乱炖适配总结样式重置上文已提及，这里推荐阅读同学写的专题文章。前言 CSS代码难维护众所皆知。为一个元素设置样式的方式可以通过定义的class、定义的id、元素的标签名、元素的属性等选择器以及这些选择器的组合来实现；作用于某个元素上的样式又可能来自单个样式规...

keke 2019-08-01 14:55 评论0 收藏0
CSS学习笔记(十六) CSS最佳实践之可维护性篇

摘要：国内各大公司都已经投入使用，在一些常见的网站，如淘宝腾讯小米等移动站点，随处可见其踪影。变革之腾讯手机淘宝的设计与实现前端乱炖适配总结样式重置上文已提及，这里推荐阅读同学写的专题文章。前言 CSS代码难维护众所皆知。为一个元素设置样式的方式可以通过定义的class、定义的id、元素的标签名、元素的属性等选择器以及这些选择器的组合来实现；作用于某个元素上的样式又可能来自单个样式规...

newtrek 2019-08-28 18:21 评论0 收藏0
前端练级攻略(第一部分)

摘要：第一部分介绍了如何使用和开发接口。由于系统变得越来越复杂，人们提出了称为预处理器和后处理器的工具来管理复杂性。当您第一次得知有预处理器和后处理器时，你很有可能在任何地方已经使用它们。我之前建议的文章，，也涵盖了预处理器相关的知识。我记得我刚开始学习前端开发的时候。我看到了很多文章及资料，被学习的资料压得喘不过气来，甚至不知道从哪里开始。本指南列出前端学习路线，并提供了平时收藏的一些...

qpal 2019-08-23 16:48 评论0 收藏0
CSS进阶篇--Normalize.css的使用（重置表）

摘要：相比于传统的，是一种现代的为准备的优质替代方案。保护了有价值的默认值通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。这就意味着你不用再为所有公共的排版元素重新设置样式。任何人都能够提交问题报告或者提交补丁。本文译自Normalize.css官网: http://nicolasgallagher.com/a... Normalize.css 只是一个很小的CSS文件，但...

dack 2019-08-28 18:16 评论0 收藏0
关于CSS Reset 那些事（四）之构架CSS基础样式库

摘要：现在回到我们这一章节的标题，将它做下补充关于那些事四之基于构架基础样式库基础库构思为什么要做基础库我上一章节的末尾抛出了几个问题假设你要做一个游戏单页面，网页上并不存在表单内容，那么你就要移除一些冗余的代码，开始自定义样式来满足自己的需求。前言先来回顾一下前几章节，我们都说了哪些内容： CSS Reset 历史与 Normalize.css 介绍 Normalize.css...

mj 2019-08-28 18:13 评论0 收藏0