我长期以来一直主张使用的一种技术是
* {
margin: 0;
padding: 0;
}
这是“CSS 重置”理论的一部分,它有助于使您的设计在浏览器之间保持一致,这是一件非常好的事情。这种技术适用于所有浏览器,因此我从未真正考虑过任何负面影响。也就是说,直到我阅读了 Christian Montoya 的这篇文章,他指出
这消除了所有浏览器之间填充和边距的差异,因此我可以自由地进行页面样式设计。不幸的是,这不是一个好习惯。它对渲染代理施加了很大的压力,需要将规则应用于文档中的每个元素,尤其是对于大型网页而言,而且这还会破坏许多良好的默认样式,尤其是在您想要拥有默认样式的提交按钮时。
我认为他提出了一些很好的观点。他可能是对渲染引擎的看法,虽然我从未真正遇到过任何严重的加载时间问题,而且我在大量页面上使用了这种技术。我认为保持图像尺寸优化才是最重要的。但默认的提交按钮确实是一个问题。实际上,如果您使用 Firefox 或 Opera 查看此网站,您会注意到您需要按下的“说出来!”按钮以提交评论已被剥夺了其不错的默认样式,现在看起来只是带有边框的普通文本。不太理想。如果您使用的是 Safari,它会使用默认的 Safari 样式按钮,这很好。
我想我仍在犹豫是否继续使用它。我想我会使用它,如果我能找到一个更好的方法来处理输入/文本区域。
您应该查看 Eric Meyer 的 CSS 重置。这处理了仅使用星号选择器带来的问题,以及其他一些问题。
@Daryn: 谢谢你的链接!是的,我之前见过,但在真正理解其价值之前从未真正理解它。那一大块 CSS 实际上 _减少_ 了页面上的渲染负载,并使内容在浏览器之间保持一致,而不会破坏 _好的_ 默认设置。
我使用一个主要的容器 div 来包装所有内容,然后添加 maincontainer * {padding:0;margin:0;}。我认为它最终与上面的代码相同。
@shane: 这也是一种有趣的方法。如果您可以将提交按钮等内容保留在该 maincontainer 之外,这可能是一个解决方案。
我认为我倾向于使用更类似于 Eric Meyer 解决方案的东西,只是将其整合到自己的单独样式表中,我会像这样单独链接到它
<link rel=”stylesheet” href=”reset.css” type=”text/css” media=”screen” />
我实际上发现使用
*html, body {margin 0; padding: 0;}
是最好的,同时定义字体大小等。对我来说,我使用它没有任何问题,您可以在需要时添加按钮的边距/填充...感谢您在第一个评论中的链接,我发现它非常有用!
尝试重置页面中的元素,或者可以使用雅虎的重置 CSS
body,div,p…{margin:0;padding:0}
干杯
重置使 ul, ol{ padding:0, margin:0, list-style-type:none;} p{ padding:0, margin:0}
但是
我需要这些属性的默认值,用于 CMS 页面,因为没有浏览器重置。谢谢