版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/hsl0530hsl/article/details/82959960
CSS Reset，意为重置默认样式。HTML中绝大部分标签元素在网页显示中都有一个默认属性值，通常为了避免重复定义元素样式，需要进行重置默认样式（CSS Reset）。
实现方式有很多，根据自己的项目需要，更多的是自己编写适合自己项目的CSS Reset，下面给一些其他大型项目的例子，作为参考。
1、 - 以下是CSS Reset 2.0标准：
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
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, 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,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
如下是一些常用的自定义的共通样式：
/* 自定义的共通样式 */
/* custom */
a {
color: #7e8c8d;
text-decoration: none;
-webkit-backface-visibility: hidden;
}
li {
list-style: none;
}
html, body {
width: 100%;
}
body {
-webkit-text-size-adjust: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
如下是CSS Reset 2.0官网：
https://meyerweb.com/eric/tools/css/reset/
2、HTML5 Doctor CSS Reset
/**
* html5doctor.com
Reset Stylesheet v1.6.1
* Richard Clark
* http://cssreset.com
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
3、Yahoo! (YUI 3) Reset CSS
/** * YUI 3.5.0 - reset.css (http://developer.yahoo.com/yui/3/cssreset/) * https://cssreset.com/ * Copyright 2012 Yahoo! Inc. All rights reserved. * http://yuilibrary.com/license/ *//* TODO will need to remove settings on HTML since we can't namespace it. TODO with the prefix, should I group by selector or property for weight savings?*/
html {
color: #000;
background: #FFF;
}
/* TODO remove settings on BODY since we can't namespace it.*//* TODO test putting a class on HEAD. - Fails on FF.*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img {
border: 0;
}
/* TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit...*/
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: 100%;
font-weight: normal;
}
q:before, q:after {
content: '';
}
abbr, acronym {
border: 0;
font-variant: normal;
}
/* to preserve line-height and selector appearance */
sup {
vertical-align: text-top;
}
sub {
vertical-align: text-bottom;
}
input, textarea, select {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
}
/*to enable resizing for IE*/
input, textarea, select {
*font-size: 100%;
}
/*because legend doesn't inherit in IE */
legend {
color: #000;
}
/* YUI CSS Detection Stamp */
#yui3-css-stamp.cssreset {
display: none;
}
4、淘宝（CSS Reset）
html {
overflow-x: auto;
overflow-y: scroll;
}
body, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, p, blockquote, th, td {
font-weight: 400;
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h4, h5 {
margin: 0;
padding: 0;
}
body {
background-color: #FFFFFF;
color: #666666;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
padding: 0 10px;
text-align: left;
}
select {
font-size: 12px;
}
table {
border-collapse: collapse;
}
fieldset, img {
border: 0 none;
}
fieldset {
margin: 0;
padding: 0;
}
fieldset p {
margin: 0;
padding: 0 0 0 8px;
}
legend {
display: none;
}
address, caption, em, strong, th, i {
font-style: normal;
font-weight: 400;
}
table caption {
margin-left: -1px;
}
hr {
border-bottom: 1px solid #FFFFFF;
border-top: 1px solid #E4E4E4;
border-width: 1px 0;
clear: both;
height: 2px;
margin: 5px 0;
overflow: hidden;
}
ol, ul {
list-style-image: none;
list-style-position: outside;
list-style-type: none;
}
caption, th {
text-align: left;
}
q:before, q:after, blockquote:before, blockquote:after {
content: "";
}
5、百度（CSS Reset）
body {
font-family: arial, helvetica, sans-serif;
font-size: 13px;
font-size-adjust: none;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1.4;
text-align: center;
}
body, ul, ol, dl, dd, h1, h2, h3, h4, h5, h6, p, form, fieldset, legend, input, textarea, select, button, th, td {
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
table {
font-size: inherit;
}
input, select {
font-family: arial, helvetica, clean, sans-serif;
font-size: 100%;
font-size-adjust: none;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: normal;
}
button {
overflow: visible;
}
th, em, strong, b, address, cite {
font-style: normal;
font-weight: normal;
}
li {
list-style-image: none;
list-style-position: outside;
list-style-type: none;
}
img, fieldset {
border: 0 none;
}
ins {
text-decoration: none;
}
6、Eric Meyer（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, 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%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: ”;
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}