css - 相对定位伪元素与绝对定位伪元素的区别

Question

考虑以下三种情况:

场景一:

div {
  width: 100px;
  height: 100px;
  background-color: black;    
}

div:before {
  content: "";
  width: 10px;
  height: 10px;
  background-color: darkred;
  position: relative;
}

场景二:

div {
  width: 100px;
  height: 100px;
  background-color: black;    
}

div:before {
  content: "";
  width: 10px;
  height: 10px;
  background-color: darkred;
  position: absolute;
}

场景三:

div {
  width: 100px;
  height: 100px;
  background-color: black;    
}

div:before {
  content: "";
  width: 10px;
  height: 10px;
  background-color: darkred;
  display:block;
  position: relative;
}

场景一(相对位置)不显示 darkred伪元素。但是当它变成 position:absolute伪元素是可见的。另外，如场景三所示，当我添加一个 display:block 时属性到场景一(相对位置)，元素是可见的。

为什么 relative职位要求 display:block和 absolute不是吗？

Answer 1

一个伪类，例如 :before有一个默认值 display CSS 属性值 inline .
display: inline; 的元素和 position: relative;默认情况下不是“块级”元素，如果它们没有内容，它们不占用任何宽度。因此，如果您不声明 display: block;并且您有一个空的内容声明，例如 content: ""; ，在场景 1 中它根本不会占用任何宽度。
position: absolute; 的元素被移出流并且是具有默认值 display 的“块级”元素CSS 属性值 block .因此，场景 2 呈现 :before伪元素，遵守其宽度和高度声明。

场景 3 成功是因为 display属性已明确设置为 block , 遵守宽度和高度声明。

您可以通过检查 :before 来查看这些默认值的设置情况。浏览器的 Web 开发人员工具中的元素 - 请参阅工具的“元素”检查器。