关于* {margin:0;(The confusion about * {margin:0; padding:0;})

编程入门 行业动态 更新时间:2024-10-27 22:22:14
关于* {margin:0;(The confusion about * {margin:0; padding:0;})

在我读过的一些文章中,使用* {margin:0; padding: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?

最满意答案

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

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

这就是为什么我不想使用通用选择器,而是明确列出要重置的元素。 通过这种方式,我不必担心重复表单元素。 (我真的应该写一下表单元素中固有的怪异,但那是另一天。)

也就是说, 这个 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

更多推荐

本文发布于:2023-07-16 13:33:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1129061.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:margin   confusion   padding

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!