为什么我必须将 top/bottom 和 left/right 设置为 0 才能让我的 body::before 完全覆盖页面？ [复制]答案

【问题标题】：Why do I have to set top/bottom and left/right to 0 in order for my body::before to completely cover the page? [duplicate]为什么我必须将 top/bottom 和 left/right 设置为 0 才能让我的 body::before 完全覆盖页面？ [复制]
【发布时间】：2021-09-13 14:45:58
【问题描述】：

我正在努力学习前端 Web 开发的基础知识，但我很难理解为什么 body::before 会如此行事。我有以下 CSS 代码：

body::before {
  content: "";
  position: fixed;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 0, 0.45)), url(https://cdn.pixabay.com/photo/2015/03/03/05/56/avenue-656969_960_720.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
}

这样，背景将显示为向左下角移动了一些像素（CodePen screenshot），并且仅当上/下和左/右设置为 0 时才会覆盖整个屏幕。为什么@ 987654324@ 位置的行为是这样的，但正常身体的位置不是吗？另外，为什么body::before即使设置为相对位置也不会出现？

【问题讨论】：

参见 ::before 作为 body 的子元素。为了使其覆盖其父级的全部大小，需要将其从文档流中取出：因此position: relative 将不起作用。需要 top/bottom/left/right 来定位元素的边缘。
您的<body> 仍然具有默认的margin 样式。使用body {margin: 0;} 将其删除。这就是为什么你有白色边框

标签： css

【解决方案1】：

body 元素默认在所有边都有 8px 的边距，这会导致它稍微移动到右下角，所以当你删除 body body { margin: 0; } 的边距时，它会解决这个问题。

其次，当您设置position: relative; width: 100%; height: 100%时，该元素会按照文档的正常流程并占据100％的宽度和高度，但是您没有定义body元素的宽度和高度。因此::before 的正常流程变为 0（即未定义）的父级的 100%，因此不会出现。因此，为了在子元素上使用position: relative;，您至少需要使用absolute length units 定义父元素的宽度和高度。

因此，以下工作

body{
  background: #000;
  width: 100vw;
  height: 100vh;
}

body::before {
  content: "";
  position: relative;

  /* 100% is a relative unit and requires its
  parent to have dimensions with absolute units */
  width: 100%;
  height: 100%;
  ...
}

【讨论】：

【解决方案2】：

在 CSS 中，::before 创建一个伪元素，它是 第一个子元素选定的元素。它通常用于将化妆品内容添加到具有 content 属性的元素。它是默认内联的。

因为 ::before 伪元素是 body 的第一个子元素。由于 body 元素的默认边距，背景似乎向左下角移动了一些像素。因为该边距被添加到具有position:fixed; 的pseudo element 的偏移量。

绝对定位元素是指计算位置的元素值是绝对的或固定的。顶部、右侧、底部和左侧属性指定从元素包含的边缘的偏移量堵塞。（包含块是相对于它的祖先元素被定位。）如果元素有边距，它们被添加到偏移量。元素建立一个新的块格式化上下文 (BFC) 的内容。

当我们使用position: relative; 时，不会出现伪元素。因为 in position 相对元素是按照文档的正常流程定位的，同样由于 ::before 伪元素是 inline，所以只占用它需要的空间，并且设置 height 和 width don'不工作。由于没有内容，它不占用任何空间，背景图像消失。如果您希望它覆盖其全部高度和宽度，请使用 display : inline-block/block; 或使用 position:fixed; 将其从正常的文档流中删除，这实际上 将显示属性更改为阻止。

【讨论】：