关于reset.css的疑问：为什么一定要重置浏览器样式？

浏览数：38 / 时间：2015年06月09日

      自开始做前端算起，我所做过的每一个项目中都会有一个reset.css，也就是重置样式表。我现在想想都不知道第一次是从哪儿弄来的一个重置样式表。快五年了，好像从来都没有质疑过关于重置样式表的内容。

      这样一个样式表里往往会有一大段对“浏览器样式”的清除与重置。刚开始做前端的时候一度感觉，能写出来这么一个样式表似乎很酷、很牛；做时间久了，也自己开始针对不同项目写自己的reset.css了，但也不外乎是一大堆重置样式，有时候都不关心浏览器里每个元素有什么样的默认样式，只是唯恐漏掉哪个元素没有把样式重置掉；其实在添加的的一些标签里，都不知道浏览器的默认样式是什么就一味的添进去了。只是感觉好酷，汗～

      到了今天，感觉好多东西，似乎有点追求形式了。查了好多关于浏览器默认样式的资料以后，发现我们写的一大堆重置样式里好多其实不需要重置，而且似乎根本不明白重置的原因与目的。于是我开始查reset的来源，后来在张鑫旭的博客里看到了这么一段内容：

1. div,address标签默认有margin值吗？有padding值吗？怎么会想到应用address,div{margin:0; padding:0;}属性呢？真是画蛇添足，多此一举。

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

3. li标签默认有margin值吗？有padding值吗？压根就没有，也不自己测测，还没事找事设置个li{margin:0; padding:0;}属性，真是衰！

4. code标签是个属于inline水平的元素，居然也扯到margin与padding的重置，真是好笑。

5.  fieldset, legend这两个90年代的标签你的网站上使用了吗？使用概率不足1%的标签也拿来重置，我实在无语了。

6. 还有th，td这些标签，幸好没有写上table与tr标签，否则我一起痛批一段。

另：经测试article, aside, footer, header, hgroup, main, nav, section, dt, summary, details这些标签也没有默认的margin与padding值。

 

据淘宝的射雕的叙述，最早的一份CSS  resest来自Tantek 的undohtml.css，很简单的代码，Tantek 根据自己的需要，对浏览器的默认样式进行了一些重置。其余一些有名的CSS reset如业界领袖Eric Meyer的reset，或是Tripoli Reset。

这里附上undohtml.css:

@charset "utf-8";
/* CSS Document */
/* undohtml.css @author:Tantek */
/* (CC) 2004 Tantek Celik. Some Rights Reserved.             */
/*   http://creativecommons.org/licenses/by/2.0                   */
/* This style sheet is licensed under a Creative Commons License. */

/* Purpose: undo some of the default styling of common (X)HTML browsers */


/* link underlines tend to make hypertext less readable, 
   because underlines obscure the shapes of the lower halves of words */
:link,:visited { text-decoration:none }

/* no list-markers by default, since lists are used more often for semantics */
ul,ol { list-style:none }

/* avoid browser default inconsistent heading font-sizes */
/* and pre/code too */
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }

/* remove the inconsistent (among browsers) default ul,ol padding or margin  */
/* the default spacing on headings does not match nor align with 
   normal interline spacing at all, so let‘s get rid of it. */
/* zero out the spacing around pre, form, body, html, p, blockquote as well */
/* form elements are oddly inconsistent, and not quite CSS emulatable. */
/*  nonetheless strip their margin and padding as well */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }

/* whoever thought blue linked image borders were a good idea? */
a img,:link img,:visited img { border:none }

/* de-italicize address */
address { font-style:normal }

/* more varnish stripping as necessary... */

CSS reset的作用是让各个浏览器的CSS样式有一个统一的基准，而这个基准更多的就是“清零”。但“清零”的目的是避免不同浏览器有不同的默认样式而导致有bug产生；所以，有时候我们对很多标签做的一些清零，其实是没什么意义的，说的不好听一点，是盲目跟风。

张鑫旭认为css reset应该是这样的：

body, dl, dd, h1, h2, h3, h4, h5, h6, p, form{margin:0;}  

ol,ul{margin:0; padding:0;}

我也觉得这些足够了。其余的中在样式里原本就可以设置了，不然会多出很多重置的样式，徒增样式量，毫无用处。

鉴于没有实践就没有发言权的说法，我自己测试了一下chrome浏览器的默认样式（有大把自由时间的童鞋们，也去自己测试一下收获颇丰～）：

@charset "utf-8";
/* chrome default CSS Document */
html, address, div, p, article, aside, footer, header, hgroup, main, nav, section, dt, summary, details, figcaption, frameset, frame{display:block;}
head, meta, title, link, style, script, datalist, noframes{display:none;}
map, area, output, q{display:inline;}
{display:none;}
body{display:block;margin:8px;}
a:-webkit-any-link{
    color:-webkit-link;
    text-decoration:underline;
    cursor:auto;
}
/*无样式的标签：
abbr,acronym(HTML不支持此标签),img, base, basefont, br, canvas, embed, font, noscript, object, span, time, wbr
*/
pre, xmp, plaintext, listing {
    display: block;
    font-family: monospace;
    white-space: pre;
    margin: 1em 0px;
}
mark {
    background-color: yellow;
    color: black;
}
sub {
    vertical-align: sub;
    font-size: smaller;
}
sup {
    vertical-align: super;
    font-size: smaller;
}
i, cite, em, var, address, dfn{
    font-style:italic;
}
strong, b {
    font-weight: bold;
}
/*address{
    display:block;
}*/
center {
    display: block;
    text-align: -webkit-center;
}
u, ins {
    text-decoration: underline;
}
s, strike, del {
    text-decoration: line-through;
}
big {
    font-size: larger;
}
small {
    font-size: smaller;
}
bdi, output { /*//////////////////////////////////////////////////////////*/
    unicode-bidi: -webkit-isolate;
}
/*output {
    display: inline;
}*/
/*q {
    display: inline;
}*/
q::before {
    content: open-quote;
}
q::after {
    content: close-quote;
}
ruby, rt {
    text-indent: 0px;
}
rt {
    line-height: normal;
    -webkit-text-emphasis: none;
}
ruby > rp { /*rt、rp：一个ruby注释*/
    display: none;
}
bdo {
    unicode-bidi: bidi-override;
}
tt, code, kbd, samp {
    font-family: monospace;
}
blockquote {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 40px;
    -webkit-margin-end: 40px;
}
p{
    display:block;
    -webkit-margin-before:1em;
    -webkit-margin-after:1em;
    -webkit-margin-start:0px;
    -webkit-margin-end:0px;
}
audio {
    width: 300px;
    height: 30px;
}
video {
    object-fit: contain;
}
audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
    -webkit-appearance: media-slider;
    display: flex;
    flex: 1 1 auto;
    height: 8px;
    margin: 0px 15px 0px 0px;
    padding: 0px;
    background-color: transparent;
    min-width: 25px;
    border: initial;
    color: inherit;
}
form {
    display: block;
    margin-top: 0em;
}
/*datalist{
    display:none;
}*/
input[type="range" i] {
    -webkit-appearance: slider-horizontal;
    padding: initial;
    border: initial;
    margin: 2px;
    color: rgb(144, 144, 144);
}

input, input[type="password" i], input[type="search" i] {
    -webkit-appearance: textfield;
    padding: 1px;
    background-color: white;
    border: 2px inset;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    -webkit-rtl-ordering: logical;
    -webkit-user-select: text;
    cursor: auto;
}
input[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button {
    align-items: flex-start;
    text-align: center;
    cursor: default;
    color: buttontext;
    padding: 2px 6px 3px;
    border: 2px outset buttonface;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    background-color: buttonface;
    box-sizing: border-box;
}
input, textarea, keygen, select, button {
    margin: 0em;
    font: -webkit-small-control;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
}
input, textarea, keygen, select, button, meter, progress {
    -webkit-writing-mode: horizontal-tb;
}
textarea {
    font-family: monospace;
    border-color: rgb(169, 169, 169);
}
textarea {
    -webkit-appearance: textarea;
    background-color: white;
    border: 1px solid;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    -webkit-rtl-ordering: logical;
    -webkit-user-select: text;
    flex-direction: column;
    resize: auto;
    cursor: auto;
    padding: 2px;
    white-space: pre-wrap;
    word-wrap: break-word;
}
progress {
    -webkit-appearance: progress-bar;
    box-sizing: border-box;
    display: inline-block;
    height: 1em;
    width: 10em;
    vertical-align: -0.2em;
}
meter {
    -webkit-appearance: meter;
    box-sizing: border-box;
    display: inline-block;
    height: 1em;
    width: 5em;
    vertical-align: -0.2em;
}
button {
    -webkit-appearance: button;
}
select {
    -webkit-appearance: menulist;
    box-sizing: border-box;
    align-items: center;
    border: 1px solid;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    white-space: pre;
    -webkit-rtl-ordering: logical;
    color: black;
    background-color: white;
    cursor: default;
}
optgroup {
    font-weight: bolder;
    display: block;
}
option {
    font-weight: normal;
    display: block;
    padding: 0px 2px 1px;
    white-space: pre;
    min-height: 1.2em;
    font: inherit;
}
keygen, select {
    border-radius: 5px;
}
keygen, select, select[size="0"], select[size="1"] {
    border-radius: 0px;
    border-color: rgb(169, 169, 169);
}
label {
    cursor: default;
}
table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}
caption {
    display: table-caption;
    text-align: -webkit-center;
}
tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}
tfoot {
    display: table-footer-group;
    vertical-align: middle;
    border-color: inherit;
}
tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
td, th {
    display: table-cell;
    vertical-align: inherit;
}
th {
    font-weight: bold;
}
colgroup {
    display: table-column-group;
}
col {
    display: table-column;
}
dialog {
    position: absolute;
    left: 0px;
    right: 0px;
    width: -webkit-fit-content;
    height: -webkit-fit-content;
    margin: auto;
    border: solid;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    padding: 1em;
    background: white;
    color: black;
}
dialog::backdrop {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background: rgba(0, 0, 0, 0.0980392);
}
ul, menu, dir {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
}
ol {
    display: block;
    list-style-type: decimal;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
}
li {
    display: list-item;
    text-align: -webkit-match-parent;
}
dl {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}
/*dt {
    display: block;
}*/
dd {
    display: block;
    -webkit-margin-start: 40px;
}

fieldset {
    display: block;
    -webkit-margin-start: 2px;
    -webkit-margin-end: 2px;
    -webkit-padding-before: 0.35em;
    -webkit-padding-start: 0.75em;
    -webkit-padding-end: 0.75em;
    -webkit-padding-after: 0.625em;
    border: 2px groove threedface;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    min-width: -webkit-min-content;
}
legend {
    display: block;
    -webkit-padding-start: 2px;
    -webkit-padding-end: 2px;
    border: none;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
}
figure {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 40px;
    -webkit-margin-end: 40px;
}
figcaption {
    display: block;
}
frameset {
    border-color: inherit;
}
/*frameset, frame {
    display: block;
}*/
h1 {
    display: block;
    font-size: 2em;
    -webkit-margin-before: 0.67em;
    -webkit-margin-after: 0.67em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}
:-webkit-any(article,aside,nav,section) h1 {
    font-size: 1.5em;
    -webkit-margin-before: 0.83em;
    -webkit-margin-after: 0.83em;
}
h2 {
    display: block;
    font-size: 1.5em;
    -webkit-margin-before: 0.83em;
    -webkit-margin-after: 0.83em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}
h3 {
    display: block;
    font-size: 1.17em;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}
h4 {
    display: block;
    -webkit-margin-before: 1.33em;
    -webkit-margin-after: 1.33em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}
h5 {
    display: block;
    font-size: 0.83em;
    -webkit-margin-before: 1.67em;
    -webkit-margin-after: 1.67em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}
h6 {
    display: block;
    font-size: 0.67em;
    -webkit-margin-before: 2.33em;
    -webkit-margin-after: 2.33em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}
hr {
    display: block;
    -webkit-margin-before: 0.5em;
    -webkit-margin-after: 0.5em;
    -webkit-margin-start: auto;
    -webkit-margin-end: auto;
    border-style: inset;
    border-width: 1px;
}
iframe {
    border: 2px inset;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
}

另附上通过查找到的资料总结的一些浏览器的margin值与padding值（没有一一测试，有兴趣的可以自己测试一下）：

IE-7:
    有默认外边距margin样式的元素：
    dd，menu, ol, ul, blockquote, body, dd, dl, form, h1-6, ul
    有默认内边距padding样式的元素：
    th, td, textarea, input, fieldset, caption, 
    
IE-8:
    有默认外边距margin样式的元素：
    dd, menu, ol, ul,  blockquote, body, dd, dl,fieldset, h1-6, hr, p, pre,
    有默认内边距padding样式的元素：
    ul, th, textarea, td, ol, menu, legend, input, fieldset, button, [dir=rtl] ul, [dir=rtl] ol, [dir=rtl] menu
    
    IE-9:
    有默认外边距margin样式的元素(与IE-8的默认样式一样)：
    dd, menu, ol, ul, blockquote, body, dd, dl, fieldset, h1-6, hr, p, pre, 
    有默认内边距padding样式的元素：
    ul, th, textarea, td, ol, menu, legend, input, fieldset, button, [dir=rtl] ul, [dir=rtl] ol, [dir=rtl] menu
    
    webkit:(ol ul, ul ol, ul ul, ol ol{margin-top:0;margin-bottom:0;}),
    有默认外边距margin样式的元素：
    body, p, blockquote, hr, h1-6, ul, ol, menu, dir, dd(margin-start), dl, form, fieldset, input, textarea, keygen, select, button, isindex, datagrid, pre, xmp, plaintext, listing,
    有默认内边距padding样式的元素：
    input, textarea, fieldset, legend
    
    opera:
    有默认外边距margin样式的元素：
    body, blockquote, dd, dl, fieldset, h1-6, hr, menu, p, pre, ul
    有默认内边距padding样式的元素：
    ul, th, td, textarea, select, ol, menu, legend, keygen, input, fieldset, button, address,

 

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style 代码 com log 使用 html http si class style 代码 com log 使用 html http si

相关文章

随机文章

您可能还喜欢

您可能还喜欢