【问题标题】:What are cons of global css reset * { margin: 0; padding: 0; }?global css reset * { margin: 0; 的缺点是什么?填充:0; }?
【发布时间】:2011-01-06 21:13:54
【问题描述】:

global css reset * { 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: "" "";
}

是不是有点具体和沉重。我从不使用其他的很多元素,比如块引用和标题。

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

使用这个有什么缺点

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

【问题讨论】:

标签: css xhtml cross-browser


【解决方案1】:

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

我经常看到的一个问题是列表。如果你盲目地应用重置,列表的项目符号将出现在包含元素的之外,这总是困扰我:

+--------------------+ |某段,| |与文本。 | | | *|一 | *|二 | *|三 | +--------------------+

也许有些设计师是故意这样做的,但我想很多时候我看到这个,是因为有人盲目地应用了重置,没有想过它会对列表项的缩进做什么。如果你寻找这个,你会到处看到它;几乎总是,您看到它的网站使用 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

【讨论】:

  • 悬挂标点通常被认为是一件好事,但我同意它的使用大多是偶然的;-)
  • 是的,它可以被故意使用,并且在与引号和连字符一起使用时效果很好。我对它与项目符号列表的使用模棱两可。它有时看起来不错,但我发现在某些设计中,它会削弱子弹的强度以标出不同的点,并且子弹有时会感觉丢失或与列表分离。另外,请注意,如果项目符号上没有边距或填充,子列表根本不会缩进,因此您将失去呈现嵌套列表的能力(除非您添加 ul ul 规则或类似的东西仅向嵌套列表添加缩进)。
  • @Brian Campbell,关于当边距/填充重置为 0 时列表中的项目符号,我建议使用的一个非常漂亮的 CSS 属性是 ul { list-style-position: inside; }
【解决方案2】:

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

至于速度,如果通过您的网站级联

【讨论】:

    【解决方案3】:

    速度是一个缺点,但影响很小,使用全局样式表 (*) 会将属性应用于每个可能的元素,即使您没有使用一个或多个

    【讨论】:

    • eric reset 还重置了 58 个元素的 9 个属性。是不是也像全局重置一样慢。
    【解决方案4】:

    全局重置的缺点更多取决于您自己的个人设置。您也可以编辑其他人的重置,只要您将其归功于他们。

    缺点: 我创建了自己的重置方式,并犯了必须返回并删除的错误。 因此,如果您使用其他人的重置,并且它包含您未曾预料到的某些内容,您可能会在您习惯的某些对象上“失去功能”。如果需要,可以通过删除有问题的重置来解决此问题。

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

    【讨论】:

      【解决方案5】:

      差异很小,但“星形规则”实际上需要更长的时间来处理它,因为它通过每个元素,应用(或在本例中删除)默认样式。

      特别是像 Eric Meyer 的目标元素一样重置,这意味着处理时间略短。

      【讨论】:

        【解决方案6】:

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

        问题有时是不同的元素,如 p、h1、h2 等都受到行高、字体大小等的影响,所以只做 padding:0 和 margin:0 并不能保证完整重置。

        希望这会有所帮助。

        【讨论】:

          【解决方案7】:

          从易读性的角度来看,按照建议将 line-height 设置为 1 是完全错误的。即使在打印的上下文中,布局软件也将默认行高(行距)设置为大约 1.15。对于网络,您通常有较长的度量(行长),您必须有一个大于 1 的行高(通常,我从 1.5 开始,通常会增加到 1.75)。排版原则是有原因的,那就是提高可读性。设置solid,行高为1的打印术语,仅用于特殊情况,例如非常大的标题。它不应该是默认值。

          是的,人们“可以”以自己的风格修改/更改重置,但事实是,这种重置被很多人视为圣杯,他们盲目地采用它,从不改变事物以使用合理的排版原则。这个网站就是这个问题的一个例证。您的眼睛需要一些垂直空间才能轻松地从一行的末尾跟随到另一行的开头。当 line-height 等于 font-size 时,会使文本更难阅读。

          【讨论】:

            【解决方案8】:

            对于浏览器,有一些默认的边距和内边距,每个元素可能是另一个(例如 li 和输入的另一个),具体取决于浏览器。 重置此值将确保在每个浏览器中所有元素的边距和内边距均为 0

            【讨论】:

              【解决方案9】:

              不要使用重置。

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

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

              当人们删除所有这些时,真的很烦人。我最终不得不回去看看他们的重置,找出这个开发人员决定使用的十亿个可怕的东西中的哪一个,然后更多可能改变。

              【讨论】:

              • 人们想要使用重置的原因有很多。作为设计师,我们关注细节,P 或 H1 标签的内边距和边距额外增加 2 或 3 像素可能会破坏设计。此外重置浏览器兼容性帮助,覆盖不同浏览器和不同机器之间的差异。
              • When I add a h1 tag I expect a margin and padding on it. 嗯?我从 google 进入这个页面,因为我添加了 h1 标签并且不希望有任何不明显的边距。
              猜你喜欢
              • 2011-09-09
              • 1970-01-01
              • 2011-07-20
              • 2016-11-05
              • 2014-11-30
              • 1970-01-01
              • 2016-06-19
              • 1970-01-01
              • 1970-01-01
              相关资源
              最近更新 更多