当前位置: 首页 > 知识库问答 >
问题:

前端 - 我看到很多网站,都会对CSS初始化:`margin: 0; padding: 0;` ,目的是什么呢?

池阳伯
2024-10-03

我看到很多网站,都会对CSS初始化:margin: 0; padding: 0;

<style>
      * {
        margin: 0;
        padding: 0;
      }
    </style>

比如:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>web</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>

  <body>
    <div id="root" style="height: 100vh"></div>
    <script type="module" src="./main.tsx"></script>
  </body>
</html>

请问这个目的是什么呢?

共有2个答案

柯乐池
2024-10-03

这叫 CSS Reset 或 CSS Normalize。

不同浏览器下某些元素的某些样式初始值是不同的,所以即便一个网页你一行 CSS 都不写,在不同浏览器下打开它的渲染结果也是不同的。为了抹平这种差异,所以诞生了这种技术方案。

你要问为啥浏览器不把这些初始值给统一了,那是因为很多都是“上古时代”还没有形成标准的时候各家厂商自己实现的,这玩意儿一旦实现并被广泛使用以后就成了 Feature 了,不是想改就能改的了。

韩自怡
2024-10-03

这个CSS初始化的目的是为了重置所有元素的默认外边距(margin)和内边距(padding)为0。不同的浏览器会为HTML元素设置不同的默认样式(这被称为浏览器样式表或用户代理样式表),这些默认样式可能会导致在不同的浏览器中网页的布局和外观有所差异。

具体来说,margin: 0; padding: 0; 的目的包括:

  1. 减少跨浏览器差异:通过显式地设置所有元素的marginpadding为0,可以消除由于不同浏览器对默认样式设置不同而导致的布局差异。
  2. 提高可预测性:当所有的marginpadding都被重置后,开发者可以更加精确地控制元素之间的间距,使得布局更加可预测和可控。
  3. 简化样式管理:通过在一开始就重置这些值,开发者在后续的样式定义中就不需要再单独为每个元素设置marginpadding为0,从而简化了样式的管理。

然而,值得注意的是,这种全局重置的方法虽然有效,但有时也可能过于激进,因为它会覆盖掉一些元素原本有用的默认样式(如列表项的默认外边距)。因此,一些开发者可能会选择更细粒度的重置或规范化方法,比如使用Normalize.css或Reset.css等CSS库,这些库会提供更精细的样式重置,同时保留一些有用的默认样式。

 类似资料:
  • 本文向大家介绍解释下为什么css的reset不建议直接这么写:*{ margin:0; padding:0;}?相关面试题,主要包含被问及解释下为什么css的reset不建议直接这么写:*{ margin:0; padding:0;}?时的应答技巧和注意事项,需要的朋友参考一下 1.*为通配符,使用通配符,即全局范围遍历,耗费浏览器效率,增大负荷; 2.会影响后面的设置的部分属性无效,例如:tab

  • 问题内容: 在做什么? 我似乎无法理解是什么。我知道有时有时会使对象居中。谢谢。 问题答案: 当您在要应用的对象上指定时,该对象将位于其父容器的中央。 指定为第二个参数基本上会告诉浏览器自动确定左右边距本身,方法是将它们均等设置。它保证左右边距将设置为相同的大小。第一个参数0表示顶部和底部边距都将设置为0。 因此,举个 例子 ,如果父级为100px,子级为50px,则该属性将确定在和之间共享50p

  • 前端用什么包来运行以前游戏厅的街机游戏?看到很多网站都有各种平台的游戏,都是怎么做到的?

  • 问题内容: 平台之间可能有所不同,但是 当我使用gcc编译并运行下面的代码时,每次在ubuntu 11.10中获得0。 为什么即使有calloc,malloc的行为也是如此? 难道就意味着即使您不希望有时将值初始化为0,也会有不必要的性能开销吗? 编辑:哦,我以前的示例不是初始化,而是碰巧使用“新鲜”块。 我恰恰在寻找的是为什么它在分配一个大块时将其初始化: 但是,感谢您指出进行分配时存在安全原因

  • 本文向大家介绍重置(初始化)css的作用是什么?相关面试题,主要包含被问及重置(初始化)css的作用是什么?时的应答技巧和注意事项,需要的朋友参考一下 我理解的,简单讲主要是为了 统一各个浏览器自带的默认样式而诞生的。 这是一个,还有就是视觉问题,浏览器默认样式会影响我们的设计还原,而且默认样式一般不够美观,满足不了定制化的视觉需求,达不到视觉产品的信息传达目标。

  • 图一是one中没有加margin的效果 图二是one中加上margin之后的效果 问:margin不是调节两个盒子之间的边距么?我的理解是one在canvas里面,那么margin应该是canvas和one的border之间的距离,为什么one会带着canvas的上边界一起下缩20px呢?难道不应该是one相对canvas下缩20px吗? 不知道我又没有表述清楚... 贴一下完整的css代码: 完