有效的CSS还是Hack?

时间:2009-05-21 20:49:24

标签: css

将它放在CSS文件的顶部:

* { margin: 0; padding: 0; }  

劈?还是有效的CSS?它有什么作用?以及如何移植到不同的浏览器/版本?

7 个答案:

答案 0 :(得分:25)

这是有效的CSS。它选择EVERY元素并重置默认边距和填充。人们使用它的原因是为了使它们的网站布局在不同的浏览器/版本中更加一致,因为每个浏览器都有自己的默认样式表。如果您不使用此声明或为每个元素指定边距/填充,则每个浏览器将对该元素使用其自己的默认边距/填充,并且页面将在不同浏览器上呈现不一致。

答案 1 :(得分:6)

根据http://css-tricks.com/margin-0-padding-0-no-longer-cool/

这是“CSS重置”理论的一部分。这消除了浏览器中填充和边距的所有差异。渲染代理非常重视将规则应用于文档中的每个元素,尤其是对于大型网页,也可以破坏许多好的默认样式,特别是当你想要默认样式的提交按钮时。

答案 2 :(得分:2)

这颗星被称为universal selector,是有效的CSS。它只是将样式应用于页面中的所有元素。但是,应该谨慎使用它。就个人而言,我还没有找到很好的用途。重置所有元素的边距和填充是你可以用其他元素,元素组和类更具体地(并且在我看来更好)做的事情。

有关浏览器支持的详细信息,请参阅this page。 (请注意,它已严重过时,已于2000年编写;我想您现在可以在所有流行的浏览器中获得全面支持。)

  

支持通用选择器   适用于两种Windows的Internet Explorer 5.x.   和Macintosh,以及IE 4.5 for   Mac,以及Opera 3.6。这也是   Netscape 6 Preview支持   在所有无数平台上发布1   为它提供,并在   预览Opera 4的第3版   视窗。

答案 3 :(得分:1)

这是:

  • 有效的CSS
  • 不是真正的“黑客”
  • 有点像kludge
  • 可能不是你想要的东西

*是通用选择器。在CSS spec中,通用选择器的特异性为0000,这意味着每个其他选择器具有更高的优先级。因此,这是一种以任何其他规则都能够覆盖的方式“重置”所有边距的方法。

请记住,此方法会使您的列表变得混乱。没有边距和填充,列表项不再缩进。一些规则确实是有益的,因为它们可以设计通常不被认为需要造型的东西。

通用选择器选择页面上的每个元素。每个小div,每个小li,依此类推。实际上,它甚至会选择不是块级元素的内容,例如aspan以及head。在许多情况下,这是过度的,在大页面上效率可能非常低。

如果您正在寻找一种方法来重置HTML上的默认样式,那么最好使用Eric Meyer的Reset CSS之类的东西。虽然重置CSS样式表要复杂得多,但选择每个元素并不过分。否则,只需将每个单独元素的边距和填充清零即可。 (一旦我开始在页面上,我总是将bodyh1的填充和边距归零。)

答案 4 :(得分:1)

你有时会看到:

html * { margin: 0; padding: 0; }

body * { margin: 0; padding: 0; }

在各种浏览器中的结果略有不同。只是需要注意的事情。

此外,还有一些不包含每个HTML元素的选择性重置 - 请参阅此文章comparing kinds of CSS reset

它不能成为黑客,因为它是有效的标准CSS。

答案 5 :(得分:0)

这是有效的CSS,但从技术上讲,它可以被视为黑客。

基本上它用于重置HTML中每个元素的边距和填充,因为不同的浏览器有时会有不同的默认值。使用此重置将确保所有元素都从公共点开始。

答案 6 :(得分:0)

它既有效又有黑客。但是,它不是特定于浏览器的。它的术语是“css reset”

正如tf111所解释的那样,我们的想法是摆脱所有浏览器中不同的边距和填充的浏览器特定设置