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

最新推荐文章于 2023-09-07 16:27:15 发布
转载 最新推荐文章于 2023-09-07 16:27:15 发布 · 1.6k 阅读 · 2
文章标签：

#css #border #浏览器 #table #input #iframe

本文介绍了15种CSS重置方法，旨在解决不同浏览器对CSS解释差异的问题，确保跨浏览器的一致性显示效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

　　在当今网页设计/开发实践中，使用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 ，这样就能避免发生这种问题。

　　本文总结收集了15套CSS重设实例 ，您可以在前端开发工作中进行参考和使用，有些是很简化的CSS Reset，有些则是非常复杂非常全面的CSS Reset，至于使用哪套，全看您的爱好或需要。

一.最简化的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重设。 如果您有什么意见或是看法，欢迎发表评论。

 

博文来源：http://blog.bingo929.com/css-reset-collection.html

CSS开发全攻略
邓邓子的博客
09-25 2094
在网页设计与开发的世界中，CSS（Cascading Style Sheets，层叠样式表）是一种不可或缺的技术，它允许开发者对网页的布局和样式进行精细的控制。本文将从CSS的基本概念、作用以及它在现代网页设计中的重要性等方面进行详细概述。CSS是一种用于描述HTML或XML文档样式的样式表语言。它定义了如何将结构化文档（例如HTML文档或XML应用程序）呈现为网页。CSS的主要作用是分离文档的内容（HTML或XML结构）与文档的表现形式（布局、颜色、字体等），从而实现更高效的页面设计与维护。
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 7189
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
一些大厂的css reset 代码
weixin_34354173的博客
08-24 331
不同的浏览器对标签的默认值不同，为了避免页面出现浏览器差异，所以要初始化样式表属性。使用通配符*并不可取，因为会遍历到每一个标签，大型网页会加载过慢，影响性能。 雅虎工程师提供的CSS初始化示例代码： body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,l...
vite项目中引入 reset.css 重置样式表方法
最新发布
qq_39111074的博客
09-07 3422
vite项目中引入 reset.css 重置样式表方法
网页重置样式表
09-09 928
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font
目前比较全的CSS reset重设方法总结
09-25
CSS重设（Reset）是前端开发中用来消除不同浏览器间默认样式差异的一种常用技术。它通过覆盖浏览器默认的CSS属性设置，为网页元素提供一个统一的起点，从而确保不同浏览器中网页的渲染具有一致性。在网页设计和开发...
CSS重设(reset)方法总结
51yunOA
04-12 1896
在当今网页设计/开发实践中，使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键。在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则，并且呈现相同的视觉效果(没有兼容性问题)。但是，我们并没有生活在这个完美的世界，现实中发生的失窃却总是恰恰相反，很多CSS样式在不同的浏览器中有着不同的解释和呈现。 　　当今流行的浏览器(如:Fire...
推荐几款主流的Css Reset
BradenHan的专栏
08-06 1381
Normalize.css是一个广泛使用的CSS Reset库，它通过保留有用的默认样式，并纠正浏览器之间的差异，提供了一致的跨浏览器体验。Eric Meyer’s Reset CSS则是经典的CSS Reset方法之一，它将大部分HTML元素的样式重置为零，并提供了一个基本的布局起点。CSS Reset是一种消除浏览器默认样式差异的技术，它可以为开发者提供一个一致的起点来构建网页样式，并改善跨浏览器的兼容性。官方网址：https://meyerweb.com/eric/tools/css/reset/
一个CSS reset.css文件示例代码（下载）
05-12
摘要:脚本资源,CSS特效,reset.css　　转载白鹿本人写的CSS中常用的 reset.css文件，用于重置html默认样式，前几天正好在论坛上看到有些CSS新手请教如何写reset.css才是最好的，其实没有最好，只能说最适合自己的网站，每个人的要求和眼光不一样，因此 reset.css的具体代码也不尽相同，这一份reset.css同样只为您提供参考，交流一种方法。
reset.css样式
05-31
淘宝最新reset.css初始化样式，Reset是革命党最激进的那一派。
最新小米官网动态交互最新小米官网动态交互
01-20
小米商城是小米官方网站直营小米旗下所有产品，囊括小米手机系列小米MIX 3 、小米8、小米6X，红米手机系列红米6，智能硬件,配件及小米生活周边，同时为米粉提供客户服务及售后支持。
reset.css & normalize.css 下载
12-09
reset.css & normalize.css 下载
CSS中常用的 reset.css文件
05-05
CSS中常用的 reset.css文件，用于重置html默认样式
HTML、CSS制作小米商城网页首页源码解析
热门推荐
Etui۹(･༥･´)و的博客
01-29 3万+
简介： 这是我学习前端以来仿写的第一个项目，沿着尚硅谷李立超老师的教学视频学习。 在仿写这个项目的过程中即巩固了这两周以来的知识，也增加了一些小经验（主要是老师传授），同时也让自己更加有信心学习下去。相信自己一定会实现自己的小梦想！加油！ 小米官网效果： 效果图： 文件目录： HTML文件 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &
用html和css仿作小米官网（静态）
m0_70220004的博客
07-09 3572
使用html和css3 制作静态页面
小米官网前端页面还原
Y_qilin_的博客
11-08 3034
小米官网前端页面还原网页效果图片HTMLcss初始化样式外部样式文件 网页效果图片 HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>小米商城-小米10 Pro、Redmi
全览解决浏览器CSS差异的终极重设方法
为了解决这一问题，CSS Reset（或称CSS重设、CSS复位、默认CSS）应运而生。 CSS Reset的主要目标是消除浏览器间的默认样式差异，使所有浏览器遵循一致的样式规则。当设计师未明确指定CSS属性值时，浏览器会依据自身...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值