目前比较全的CSS重设(reset)方法总结

2024-06-20 00:38

本文主要是介绍目前比较全的CSS重设(reset)方法总结,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键。在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则,并且呈现相同的视觉效果(没有兼容性问题)。但是,我们并没有生活在这个完美的世界,现实中发生的失窃却总是恰恰相反,很多CSS样式在不同的浏览器中有着不同的解释和呈现。

  当今流行的浏览器(如:Firefox、Opera、Internet Explorer、Chrome、Safari等等)中,有一些都是以自己的方式去理解CSS规范,这就会导致有的浏览器对CSS的解释与设计师的CSS定义初衷相冲突,使得网页的样子在某些浏览器下能正确按照设计师的想法显示,但有些浏览器却并没有按照设计师想要的样子显示出来,这就导致浏览器的兼容性问题。更糟的是,有的浏览器完全无视CSS的一些声明和属性。

  正因为上述冲突和问题依然存在于这个”不完美的世界”,所以一些设计师想到了一种避免浏览器兼容性问题的方法,那就是CSS Reset,什么是CSS Reset?我们可以把它叫做CSS重设,也有人叫做CSS复位、默认CSS、CSS重置等。CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同,导致设计师在没有定义某个CSS属性时,不同的浏览器会按照自己的默认值来为没有定义的样式赋值,所以我们要先定义好一些CSS样式,来让所有浏览器都按照同样的规则解释CSS,这样就能避免发生这种问题。

一.最简化的CSS Reset(重设) :

* {
      padding: 0;
      margin: 0;
}

  这是最普遍最简单的CSS重设,将所有元素的padding和margin值都设为0,可以避免一些浏览器在理解这两个属性默认值上的”分歧”。

* {
       padding: 0;
       margin: 0;
       border: 0;
}

  这是在上一个重设的基础上添加了对border属性的重设,初始值为0的确能避免一些问题。

* {
       outline: 0;
       padding: 0;
       margin: 0;
       border: 0;
}

  在前两个的基础上添加了outline属性的重设,防止一些冲突。

二.浓缩实用型CSS Reset(重设):

* {
       vertical-align: baseline;
       font-weight: inherit;
       font-family: inherit;
       font-style: inherit;
       font-size: 100%;
       outline: 0;
       padding: 0;
       margin: 0;
       border: 0;
}

  该CSS重设方法出自Perishable Press,这是他常用的方法。

三.Poor Man 的CSS Reset:

html, body {
       padding: 0;
       margin: 0;
}
html {
       font-size:1em;

body {
       font-size:100%;

a img, :link img, :visited img {
       border:0px;

  这个重设方法将html和body下元素的padding和margin都设为0,并分别为html标签和body标签下的所有元素设置了初始的字体大小,最重要的是把有链接的图片的默认边框去掉了。

四.Siolon’s Global Reset

* {
    vertical-align: baseline;
    font-family: inherit;
    fo

nt-style: inherit;
    font-size: 100%;
    border: none;
    padding: 0;
    margin: 0;
}
body {
    padding: 5px;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
    margin: 20px 0;
}
li, dd, blockquote {
    margin-left: 40px;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

五.Shaun Inman’s Global Reset

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, table, th, td, embed, object {
    padding: 0;
    margin: 0;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
    fieldset, img, abbr {
    border: 0;
}
address, caption, cite, code, dfn, em,
h1, h2, h3, h4, h5, h6, strong, th, var {
    font-weight: normal;
    font-style: normal;
}
ul {
    list-style: none;
}
caption, th {
    text-align: left;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 1.0em;
}
q:before, q:after {
    content: ”;
}
a, ins {
    text-decoration: none;
}

六.Yahoo(YUI) CSS Reset:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, 
form,fieldset,input,textarea,p,blockquote,th,td { 
    padding: 0; 
    margin: 0; 

table { 
    border-collapse: collapse; 
    border-spacing: 0; 

fieldset,img { 
    border: 0; 

address,caption,cite,code,dfn,em,strong,th,var { 
    font-weight: normal; 
    font-style: normal; 

ol,ul { 
    list-style: none; 

caption,th { 
    text-align: left; 

h1,h2,h3,h4,h5,h6 { 
    font-weight: normal; 
    font-size: 100%; 

q:before,q:after { 
    content:”; 

abbr,acronym {
    border: 0; 
}

七.Eric Meyer’s CSS Reset

html, body, div, span, applet, object, iframe, table, caption, 
tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins, 
kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, 
acronym, address, big, cite, code, dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend { 
    vertical-align: baseline; 
    font-family: inherit; 
    font-weight: inherit; 
    font-style: inherit; 
    font-size: 100%; 
    outline: 0; 
    padding: 0; 
    margin: 0; 
    border: 0; 

:focus { 
    outline: 0; 

body { 
    background: white; 
    line-height: 1; 
    color: black; 

ol, ul { 
    list-style: none; 

table { 
    border-collapse: separate; 
    border-spacing: 0; 

caption, th, td { 
    font-weight: normal; 
    text-align: left; 

blockquote:before, blockquote:after, q:before, q:after { 
    content: “”; 

blockquote, q { 
    quotes: “” “”; 
}

八.Condensed Meyer Reset:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, textarea, p, blockquote, th, td {
    padding: 0;
    margin: 0;
}
    fieldset, img {
    border: 0;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
ol, ul {
    list-style: none;
}
address, caption, cite, code, dfn, em, strong, th, var {
    font-weight: normal;
    font-style: normal;
}
caption, th {
    text-align: left;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    font-size: 100%;
}
q:before, q:after {
    content: ”;
}
abbr, acronym {
    border: 0;
}

九.Ateneu Popular CSS Reset

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, 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-weight: inherit; 
    font-style: inherit; 
    font-size: 100%; 
    font-family: inherit; 
    vertical-align: baseline; 

:focus {
    outline: 0;

a, a:link, a:visited, a:hover, a:active{
    text-decoration:none

table {
    border-collapse: separate;
    border-spacing: 0;

th, td {
    text-align: left;
    font-weight: normal;

img, iframe {
    border: none;
    text-decoration:none;

ol, ul {
    list-style: none;

input, textarea, select, button {
    font-size: 100%;
    font-family: inherit;

select {
    margin: inherit;

hr {
    margin: 0;
    padding: 0;
    border: 0;
    color: #000;
    background-color: #000;
    height: 1px
}

十.Chris Poteet’s Reset CSS

* { 
    vertical-align: baseline; 
    font-family: inherit; 
    font-style: inherit; 
    font-size: 100%; 
    border: none; 
    padding: 0; 
    margin: 0; 

body { 
    padding: 5px; 

h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl { 
    margin: 20px 0; 

li, dd, blockquote { 
    margin-left: 40px; 

table { 
    border-collapse: collapse; 
    border-spacing: 0; 
}

十一.Tantek Celik Reset CSS

:link,:visited { text-decoration:none } 
ul,ol { list-style:none } 
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; } 
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input 
{ margin:0; padding:0 } 
a img,:link img,:visited img { border:none } 
address { font-style:normal }

十二.Christian Montoya Reset CSS

html, body, form, fieldset { 
    margin: 0; 
    padding: 0; 
    font: 100%/120% Verdana, Arial, Helvetica, sans-serif; 

h1, h2, h3, h4, h5, h6, p, pre, 
blockquote, ul, ol, dl, address { 
    margin: 1em 0; 
    padding: 0; 

li, dd, blockquote { 
    margin-left: 1em; 

form label { 
    cursor: pointer; 

fieldset { 
    border: none; 

input, select, textarea { 
    font-size: 100%; 
    font-family: inherit; 
}

十三.Rudeworks Reset CSS

* { 
    margin: 0; 
    padding: 0; 
    border: none; 

html { 
    font: 62.5% “Lucida Grande”, Lucida, Verdana, sans-serif; 
    text-shadow: #000 0px 0px 0px; 

ul { 
    list-style: none; 
    list-style-type: none; 

h1, h2, h3, h4, h5, h6, p, pre, 
blockquote, ul, ol, dl, address { 
    font-weight: normal; 
    margin: 0 0 1em 0; 

cite, em, dfn { 
    font-style: italic; 

sup { 
    position: relative; 
    bottom: 0.3em; 
    vertical-align: baseline; 

sub { 
    position: relative; 
    bottom: -0.2em; 
    vertical-align: baseline; 

li, dd, blockquote { 
    margin-left: 1em; 

code, kbd, samp, pre, tt, var, input[type='text'], textarea { 
    font-size: 100%; 
    font-family: monaco, “Lucida Console”, courier, mono-space; 

del { 
    text-decoration: line-through; 

ins, dfn { 
    border-bottom: 1px solid #ccc; 

small, sup, sub { 
    font-size: 85%; 

abbr, acronym { 
    text-transform: uppercase; 
    font-size: 85%; 
    letter-spacing: .1em; 
    border-bottom-style: dotted; 
    border-bottom-width: 1px; 

a abbr, a acronym { 
    border: none; 

sup { 
    vertical-align: super; 

sub { 
    vertical-align: sub; 

h1 { 
    font-size: 2em; 

h2 { 
    font-size: 1.8em; 

h3 { 
    font-size: 1.6em; 

h4 { 
    font-size: 1.4em; 

h5 { 
    font-size: 1.2em; 

h6 { 
    font-size: 1em; 

a, a:link, a:visited, a:hover, a:active { 
    outline: 0; 
    text-decoration: none; 

a img { 
    border: none; 
    text-decoration: none; 

img { 
    border: none; 
    text-decoration: none; 

label, button { 
    cursor: pointer; 

input:focus, select:focus, textarea:focus { 
    background-color: #FFF; 

fieldset { 
    border: none; 

.clear { 
    clear: both; 

.float-left { 
    float: left; 

.float-right { 
    float: right; 

body { 
    text-align: center; 

#wrapper { 
    margin: 0 auto; 
    text-align: left; 
}

十四. Anieto2K Reset CSS

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, dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
center, u, b, i { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: 0; 
    font-weight: normal; 
    font-style: normal; 
    font-size: 100%; 
    font-family: inherit; 
    vertical-align: baseline 

body { 
    line-height: 1 

:focus { 
    outline: 0 

ol, ul { 
    list-style: none 

table { 
    border-collapse: collapse; 
    border-spacing: 0 

blockquote:before, blockquote:after, q:before, q:after { 
    content: “” 

blockquote, q { 
    quotes: “” “” 

input, textarea { 
    margin: 0; 
    padding: 0 

hr { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    color: #000; 
    background-color: #000; 
    height: 1px 
}

十五.CSSLab CSS Reset

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, 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-weight: inherit; 
    font-style: inherit; 
    font-size: 100%; 
    font-family: inherit; 
    vertical-align: baseline; 

:focus { 
    outline: 0; 

table { 
    border-collapse: separate; 
    border-spacing: 0; 

caption, th, td { 
    text-align: left; 
    font-weight: normal; 

a img, iframe { 
    border: none; 

ol, ul { 
    list-style: none; 

input, textarea, select, button { 
    font-size: 100%; 
    font-family: inherit; 

select { 
    margin: inherit; 

/* Fixes incorrect placement of numbers in ol’s in IE6/7 */ 
ol { margin-left:2em; } 
/* == clearfix == */ 
.clearfix:after { 
    content: “.”; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 

.clearfix {display: inline-block;} 
* html .clearfix {height: 1%;} 
.clearfix {display: block;}

  好了,CSS重设目前先总结到这里,这15套重设方法其实都是有共同点的,也许有的实现方法不同,但大部分都是同一个目的,就是为了让更多的浏览器能显示同样的效果。有了这些CSS重设作为资料和参考,也许会对你的工作有所帮助甚至提高效率,但是,毕竟这些重设都是别人写的,你完全也可以为自己量身定制一套CSS重设。

这篇关于目前比较全的CSS重设(reset)方法总结的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1076615

相关文章

Python实现图片分割的多种方法总结

《Python实现图片分割的多种方法总结》图片分割是图像处理中的一个重要任务,它的目标是将图像划分为多个区域或者对象,本文为大家整理了一些常用的分割方法,大家可以根据需求自行选择... 目录1. 基于传统图像处理的分割方法(1) 使用固定阈值分割图片(2) 自适应阈值分割(3) 使用图像边缘检测分割(4)

Java中Switch Case多个条件处理方法举例

《Java中SwitchCase多个条件处理方法举例》Java中switch语句用于根据变量值执行不同代码块,适用于多个条件的处理,:本文主要介绍Java中SwitchCase多个条件处理的相... 目录前言基本语法处理多个条件示例1:合并相同代码的多个case示例2:通过字符串合并多个case进阶用法使用

Python中__init__方法使用的深度解析

《Python中__init__方法使用的深度解析》在Python的面向对象编程(OOP)体系中,__init__方法如同建造房屋时的奠基仪式——它定义了对象诞生时的初始状态,下面我们就来深入了解下_... 目录一、__init__的基因图谱二、初始化过程的魔法时刻继承链中的初始化顺序self参数的奥秘默认

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Windows Docker端口占用错误及解决方案总结

《WindowsDocker端口占用错误及解决方案总结》在Windows环境下使用Docker容器时,端口占用错误是开发和运维中常见且棘手的问题,本文将深入剖析该问题的成因,介绍如何通过查看端口分配... 目录引言Windows docker 端口占用错误及解决方案汇总端口冲突形成原因解析诊断当前端口情况解

Spring 基于XML配置 bean管理 Bean-IOC的方法

《Spring基于XML配置bean管理Bean-IOC的方法》:本文主要介绍Spring基于XML配置bean管理Bean-IOC的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一... 目录一. spring学习的核心内容二. 基于 XML 配置 bean1. 通过类型来获取 bean2. 通过

基于Python实现读取嵌套压缩包下文件的方法

《基于Python实现读取嵌套压缩包下文件的方法》工作中遇到的问题,需要用Python实现嵌套压缩包下文件读取,本文给大家介绍了详细的解决方法,并有相关的代码示例供大家参考,需要的朋友可以参考下... 目录思路完整代码代码优化思路打开外层zip压缩包并遍历文件:使用with zipfile.ZipFil

Python处理函数调用超时的四种方法

《Python处理函数调用超时的四种方法》在实际开发过程中,我们可能会遇到一些场景,需要对函数的执行时间进行限制,例如,当一个函数执行时间过长时,可能会导致程序卡顿、资源占用过高,因此,在某些情况下,... 目录前言func-timeout1. 安装 func-timeout2. 基本用法自定义进程subp