什么是全局css重置* {margin:0;填充:0; }?

时间:2010-01-19 16:11:14

标签: css xhtml cross-browser

全局css重置的缺点是什么* {margin:0;填充:0; }?

人们更喜欢eric meyer css。

这是eric mayer 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 {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
body {
    line-height: 1;
    color: black;
    background: white;
}
ol, ul {
    list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}

是不是有点特定和沉重。我从不使用像这样的休息中的许多元素,如blockquote和caption。

更新 和eric重置为58个元素重置9个属性。是不是也像人们谈论全球重置一样慢。

使用此功能有什么用处

* { margin: 0; padding: 0; }
select { min-width:1.5em; }

9 个答案:

答案 0 :(得分:10)

问题是有些元素需要边距和/或填充才能正确显示,人们忘记将它们重新设置。此外,对于许多元素,您将设置自己的样式,覆盖重置,因此重置是多余的;你应该按照你想要的方式设置样式。

我看到的一个问题是列表。如果您盲目地应用重置,列表的项目符号将显示在包含元素的,这总是困扰我:

    +--------------------+
    | Some paragraph,    |
    | with text.         |
    |                    |
   *| One                |
   *| Two                |
   *| Three              |
    +--------------------+

也许有些设计师故意这样做,但我认为很多时候我都会看到这一点,这是因为有人盲目地应用了重置而没有考虑它会对列表项的缩进做什么。如果你寻找这个,你会看到它到处都是;几乎总是,你看到它的网站使用CSS重置。有关如何正确设置列表格式的详细信息,请参阅Consistent List Indentation on the Mozilla Developer Center

另一个问题是,在重置之后,有时人们不记得将边距应用于隐藏的元素。例如,<dl>元素;它的默认样式不是很好,但它至少可以让你区分其中的<dt><dd>元素。如果你应用了一个重置​​,那么你就会失去这一点,并且最终会毫无区别地将所有东西塞进去。 Stack Overflow的重置可以做到这一点,例如,使<dl>元素变得毫无用处:

期限
定义
期限
定义


Stack Overflow的重置也没有<dl>元素上的任何顶部或底部边距,只有<p>的底部边距;因此我必须添加额外的<br>,以防止上述<dl>针对此段落运行。

如果您确实使用了重置,请务必小心确保所有 HTML元素以合理的方式显示。并删除重置的部分,这些部分会被您添加的后续规则覆盖;我没有真正的理由重置<b><i>,然后将font-weightfont-style应用于他们,如果您将保证金重置为0,然后将其设置为2 em,那么为什么不将重置移至0

答案 1 :(得分:3)

Eric Meyer的CSS重置不仅可以删除填充和边距,还可以使浏览器的默认样式保持一致。许多风格规则反映了这一事实。我不知道默认情况下他的重置中没有包含哪些元素,但我可以说你发布的特定重置确实包含许多修订,以确保跨浏览器的最大兼容性。

至于速度,如果级联的速度&lt;通过您的网站100种风格是决定您性能的因素,您可能会遇到更深层次的问题。确保尽可能多地缓存文件,并且不要使用额外的CSS规则。

答案 2 :(得分:2)

速度是一个骗局,但影响轻微,使用全局样式表(*)将属性应用于每个元素,即使您没有使用一个或多个

答案 3 :(得分:2)

全局重置的缺点更多地基于您自己的个人设置。只要您信任,您也可以编辑其他人的重置。

缺点: 我创建了自己的重置方式,并且犯了错误,我不得不重新开始删除。 因此,如果您使用其他人的重置并且它包含您不期望的某些内容,您可能会在某些您曾经习惯的对象上“失去功能”。如果需要,可以通过删除有问题的重置来解决这个问题。

优点: 我已经用了近一年的重置工作了,我非常喜欢它。我真的没有注意到任何性能问题,并且没有让我感到惊讶的是元素显示的方式,而且我不必做愚蠢的事情,比如每当我建立一个新网站时将身体的边距/填充和html设置为0。 / p>

答案 4 :(得分:2)

差别很小,但“星级规则”在处理每个元素时实际需要更长的时间,应用(或在这种情况下删除)默认样式。

专门重置Eric Meyer的目标元素,意味着处理时间略短。

答案 5 :(得分:1)

我没有看到太多的缺点。如果您在多个浏览器中运行您的网站,我认为如今使用非常强大的CSS重置是必不可少的。

有些时候问题是p,h1,h2等不同的元素都受到行高,字体大小等的影响,所以只做填充:0和margin:0不能保证满复位。

希望这有帮助。

答案 6 :(得分:1)

从易读性的角度来看,根据建议将行高设置为1是完全​​错误的。即使在打印环境中,布局软件也会将默认行高(前导)设置为大约1.15。对于通常有长测量(线长)的网络,你必须有一个大于1的行高(通常,我从1.5开始,经常上升到1.75)。排版原则是有原因的,那就是为了提高可读性。设置实线(行高为1的打印术语)仅用于特殊情况,例如非常大的标题。它不应该是一个默认值。

是的,人们“可以”修改/改变他们自己风格的重置,但事实是,这种重置被许多人视为一个圣杯,他们盲目地采用它并且永远不会改变使用声音排版原则的东西。这个网站就是这个问题的一个例子。你的眼睛需要一些垂直空间,从一条线的末端到另一条线的开头很容易跟随。当line-height等于font-size时,它会使文本更难阅读。

答案 7 :(得分:0)

对于浏览器,有一些默认的边距和填充,根据浏览器,它们可能是每个元素的另一个(例如另一个用于li和输入)。 重置此值将使您确保在每个浏览器中对所有元素保证金和填充是0

答案 8 :(得分:0)

不要使用重置。

重置对于其他和未来的开发人员来说真的很烦人。

当我添加一个h1标签时,我希望有一个边距和填充。当我添加一个p标签时,我希望每个段落之间有空格。

当人们删除所有这些时,它真的很烦人。我最终不得不回过头来看看他们的重置数据,这个开发人员决定使用的十亿可怕的那些然后更多可能会改变。