关于 * {margin:0; 的困惑填充:0;}

发布于 2024-11-14 05:38:01 字数 135 浏览 3 评论 0原文

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

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

In some articles that I've read, the use of * {margin:0; padding:0;} is discouraged as it would affect the web site's performance. So I turned to a reset.css stylesheet.

But I'm wondering, how does it affect the performance?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

墨离汐 2024-11-21 05:38:01

这篇 Eric Meyer 帖子讨论了其背后的原因。

这就是为什么这么多人归零的原因
他们的填充和边距
一切都通过普遍的方式
选择器。这是一个好的开始,但是
不幸的是意味着所有
元素将有其填充和
边距归零,包括表单元素
例如文本区域和文本输入。在
某些浏览器,这些样式将是
被忽略。在其他情况下,不会有
效果明显。还有一些人可能会
改变他们的输入的外观。
不幸的是,没有办法
知道,这是一个发生事情的领域
可能会发生很大的变化
未来几年。

这就是为什么我不想使用
通用选择器,而是
明确列出要包含的元素
重置。这样我就不用
担心修改表单元素。 (我
真的应该写一下
形式元素固有的怪异,
但这是另一天的事了。)

也就是说,下面的图表来自 Steve Souders 的这篇文章展示了使用通用选择器的测试页面加载时间的差异 与使用后代选择器的页面相比。

在此处输入图像描述

The reasoning behind this was discussed in this Eric Meyer post.

This is why so many people zero out
their padding and margins on
everything by way of the universal
selector. That’s a good start, but it
does unfortunately mean that all
elements will have their padding and
margin zeroed, including form elements
like textareas and text inputs. In
some browsers, these styles will be
ignored. In others, there will be no
apparent effect. Still others might
have the look of their inputs altered.
Unfortunately, there’s just no way to
know, and it’s an area where things
are likely to change quite a bit over
the next few years.

So that’s why I don’t want to use the
universal selector, but instead
explicitly list out elements to be
reset. In this way, I don’t have to
worry about munging form elements. (I
really should write about the
weirdnesses inherent in form elements,
but that’s for another day.)

That said, the following chart from this Steve Souders post shows the difference in load times for a test page using universal selectors compared with a page using descendant selectors.

enter image description here

巾帼英雄 2024-11-21 05:38:01

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

您可以通过缩小代码的范围来优化此代码,例如仅在某些导致出现问题的元素上使用它

h1,ul
{
保证金:0;

填充:0;
}

it is effect the performance because the browsers engine have to apply this style to every element on the page this will lead to heavy rendering specially in the big pages with a lot of elements and this method is a bad practice too because it may remove a good default styles for some elements

you may optimize this code by reduce the scope of it like using it on just some elements that make the problems like this

h1,ul
{
margin:0;

padding:0;
}

幸福还没到 2024-11-21 05:38:01

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

使用单独的 reset.css 确实会产生一些性能问题,因为您强制用户从服务器请求另一个文件。从长远来看,高速线路上的几 kb 根本不算什么。但对于某人在移动浏览器上的另一个文件来说可能太多了。

Using *{margin:0;padding:0;} in your stylesheet will not affect performance and is helpful in tackling various formatting issues.

Using a separate reset.css does have some performance issues, as you are forcing the user to requested one more file from the server. In the grand scheme of things, a few kb on a high speed line is nothing. But another file for someone on a mobile browser can be too much.

椵侞 2024-11-21 05:38:01

我认为您读到的网站需要检查一下,重置样式表是公平竞争环境的方法。开销非常小,不会产生任何影响,尤其是对于现代浏览器。

I think the website you read that on needs its head checked, a reset style sheet is the way to go to level the playing field. The overhead is so marginal it won't make a difference especially with modern browsers.

不可一世的女人 2024-11-21 05:38:01
body {padding:0;margin:0;} 

它会影响网页显示,因为如果不使用它,我们就必须进行

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

诸如替换之类的操作,以避免网页左侧和顶部出现狭窄的白色条带。

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文