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

Jit*_*yas 4 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: "" "";
}
Run Code Online (Sandbox Code Playgroud)

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

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

有什么用呢

* { margin: 0; padding: 0; }
select { min-width:1.5em; }
Run Code Online (Sandbox Code Playgroud)

Bri*_*ell 10

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

我看到的一个问题是列表.如果你一味地加以复位,对列表中的子弹会出现包含的元素,它总是困扰我的:

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

也许有些设计师故意这样做,但我认为很多时候我都会看到这一点,这是因为有人盲目地应用了重置而没想过它会对列表项的缩进做些什么.如果你寻找这个,你会看到它到处都是; 几乎总是,你看到它的网站使用CSS重置.有关如何正确格式化列表的详细信息,请参阅Mozilla开发人员中心上的一致列表缩进.

另一个问题是,在重置之后,有时候人们不记得将边距应用回来的模糊元素.例如,<dl>元素; 它的默认样式并不好,但它至少可以让你区分它们中的元素<dt><dd>元素.如果你应用了一个重置​​,那么你就会失去这一点,最终会把所有东西都挤在一起而没有任何区别.Stack Overflow的重置就是这样做,例如,使<dl>元素变得无用:

术语
定义
术语
定义


Stack Overflow的重置也缺少<dl>元素上的任何顶部或底部边距,并且只有底部边距<p>; 所以我必须添加一个额外的<br>,以防止上述内容<dl>对抗此段.

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


Jos*_*tey 5

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

至于速度,如果通过您的网站级联 < 100 个样式的速度决定了您的性能的成败,那么您可能面临着更深层次的问题。确保缓存尽可能多的文件,并且不要担心一些额外的 CSS 规则。