在我读过的一些文章中,* {margin:0; padding:0;}
不鼓励使用 ,因为它会影响网站的性能。所以我转向reset.css
样式表。
但我想知道,它如何影响性能?
这背后的原因在Eric Meyer 的这篇文章中进行了讨论。
这就是为什么这么多人通过通用选择器将所有内容的填充和边距归零的原因。这是一个好的开始,但不幸的是,这意味着所有元素的填充和边距都将归零,包括文本区域和文本输入等表单元素。在某些浏览器中,这些样式将被忽略。在其他情况下,不会有明显的效果。还有一些人可能会改变他们输入的外观。不幸的是,没有办法知道,而且在接下来的几年里,这个领域的情况可能会发生很大变化。
所以这就是为什么我不想使用通用选择器,而是明确列出要重置的元素。这样,我就不必担心修改表单元素了。(我真的应该写一下表单元素固有的怪异之处,但那是另一天的事了。)
也就是说,Steve Souders 帖子中的下图显示了使用通用选择器的测试页面与使用后代选择器的页面的加载时间差异。
这会影响性能,因为浏览器引擎必须将此样式应用于页面上的每个元素,这将导致特别是在具有大量元素的大页面中进行大量渲染,并且这种方法也是一种不好的做法,因为它可能会删除一个好的某些元素的默认样式
您可以通过减少它的范围来优化此代码,例如仅在一些导致此类问题的元素上使用它
h1,ul
{
margin:0;
padding:0;
}
使用*{margin:0;padding:0;}
in your stylesheet
will 不会影响性能,有助于解决各种格式问题。
使用单独的reset.css
文件确实存在一些性能问题,因为您正在强制用户从服务器请求一个更多的文件。在宏伟的计划中,高速线路上的几 kb 不算什么。但是在移动浏览器上为某人准备的另一个文件可能太多了。
我认为您阅读的网站需要对其进行检查,重置样式表是平衡竞争环境的方法。开销是如此微不足道,尤其是对于现代浏览器而言,它不会产生影响。
body {padding:0;margin:0;}
It effects the webpage display because without its use we have to
margin-left:-7px;
margin-top:-7px;
etc. like substitutions to avoid a narrow white strip on the left and top of the webpage.