关于* {margin:0;填充:0;}

时间:2011-06-06 13:25:30

标签: css padding margin css-reset

在我读过的一些文章中,不鼓励使用* {margin:0; padding:0;},因为它会影响网站的性能。所以我转向reset.css样式表。

但我想知道,它对性能有何影响?

5 个答案:

答案 0 :(得分:7)

this Eric Meyer的帖子中讨论了背后的原因。

  

这就是为什么这么多人归零的原因   他们的填充和边距   一切都通过普遍的方式   选择。这是一个好的开始,但它   不幸的是,这意味着所有   元素将有他们的填充和   保证金归零,包括表格元素   像textareas和文本输入。在   一些浏览器,这些样式将是   忽略。在其他人,将没有   明显的效果。还有其他人可能   看看他们的输入被改变了。   不幸的是,没有办法   知道,这是一个事物的领域   可能会改变很多   未来几年。

     

这就是为什么我不想使用   通用选择器,但相反   明确列出要素   重启。通过这种方式,我没有   担心重复形式元素。 (一世   真的应该写一下   形式元素固有的怪异,   但这是另一天。)

也就是说,来自this Steve Souders帖子的以下图表显示了使用universal selectors的测试页与使用descendant selectors的页面相比,加载时间的差异。

enter image description here

答案 1 :(得分:2)

它会影响性能,因为浏览器引擎必须将此样式应用于页面上的每个元素,这将导致特别在具有大量元素的大页面中进行大量渲染,这种方法也是一种不好的做法,因为它可能删除某些元素的良好默认样式

您可以通过缩小范围来优化此代码,就像在一些导致此类问题的元素上使用它一样

h1,ul {
margin:0;

padding:0;
}

答案 2 :(得分:0)

我认为您阅读的网站需要进行头部检查,重置样式表是平整竞争环境的方法。开销是如此微不足道,特别是对于现代浏览器而言,它不会产生任何影响。

答案 3 :(得分:0)

*{margin:0;padding:0;}中使用stylesheet不会影响效果,有助于解决各种格式问题。

使用单独的reset.css确实存在一些性能问题,因为您强制用户从服务器请求另外一个文件。在宏伟的计划中,高速线路上的几个kb是没有的。但移动浏览器上某人的另一个文件可能太多了。

答案 4 :(得分:-1)

body {padding:0;margin:0;} 

它影响网页显示,因为没有它的使用我们必须

margin-left:-7px;
margin-top:-7px;

等。喜欢替换以避免网页左侧和顶部出现狭窄的白色条带。