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

window等伪类的默认:before CSS属性值为display。

默认情况下，inline和display: inline;的元素不是“块级”元素，如果它们没有内容，则它们不会占用任何宽度。因此，如果您没有声明position: relative;并且您有一个空的内容声明，例如display: block;，那么它在场景1中根本不会占用任何宽度。

content: "";的元素将从流中取出，并且是“块级”元素，其默认position: absolute; CSS属性值为display。因此，场景2呈现block伪元素，尊重其宽度和高度声明。

方案3成功，因为:before属性已显式设置为display，这符合宽度和高度声明。

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

相对定位伪元素与绝对定位伪元素之间的差异

1 个答案: