【问题标题】:The confusion about * {margin:0; padding:0;}关于 * {margin:0; 的困惑填充:0;}
【发布时间】:2011-09-09 07:24:36
【问题描述】:

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

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

【问题讨论】:

    标签: css padding margin css-reset


    【解决方案1】:

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

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

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

    也就是说,thisSteve Souders 帖子中的下表显示了使用 universal selectors 的测试页面与使用 descendant selectors 的页面的加载时间差异。

    【讨论】:

      【解决方案2】:

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

      你可以通过缩小它的范围来优化这个代码,比如只在一些会出现这样的问题的元素上使用它

      h1,ul {
      margin:0;

      padding:0;<br>}

      【讨论】:

        【解决方案3】:

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

        【讨论】:

          【解决方案4】:

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

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

          【讨论】:

            【解决方案5】:
            body {padding:0;margin:0;} 
            

            它会影响网页显示,因为如果没有它,我们就必须这样做

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

            等等。例如替换,以避免网页左侧和顶部出现窄白条。

            【讨论】:

              猜你喜欢
              • 2023-04-02
              • 2011-01-06
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 2011-07-20
              • 2019-05-17
              相关资源
              最近更新 更多