Question

我尝试构建a pure CSS tree。我遇到了块之间水平线的问题（两个块处于同一水平）。我在以下jsfiddles中隔离了该问题：

HTML：

<span class="first">First</span>
<span class="second">Second</span>

CSS：

.first {
  background-color: #dc3545;
  color: #fff;
  font-size: 1.2rem;
  border: 1px #ccc solid;
  border-radius: 20px;
  padding: 5px 10px;
  margin-top: 10px;
}

.second {
  background-color: #6f42c1;
  color: #fff;
  font-size: 1.2rem;
  border: 1px #ccc solid;
  border-radius: 5px;
  padding: 5px 10px;
  margin-top: 10px;
  margin-left: 10px;
}

.second::before {
  content: "";
  position: relative;
  top: -13px;
  left: -30px;
  border-left: 1px solid #aaa;
  border-bottom: 1px solid #000;
  border-radius: 0 0 0 0px;
  height: 26px;
  width: 50px !important;
}

当CSS位置（在.second :: before中）is set to relative中时，不考虑宽度（以像素为单位），仅显示垂直线，并且将宽度“由浏览器强制”为1像素

当CSS位置（在.second :: before中）is set to absolute时，不考虑宽度，并且显示水平线，但是该线未将两个块连接在一起。

我已经尝试了以下选项的许多组合：

位置：绝对/相对/静态/固定
显示：阻止/内联
溢出：自动/可见；

我已经看过以下问题：

以及以下文章：

https://alistapart.com/article/css-positioning-101

Answer 1

当CSS位置（在.second :: before中）设置为相对位置时，不考虑宽度（以像素为单位固定），仅显示垂直线，并且“由浏览器强制”宽度为1像素。

默认情况下，伪元素是嵌入式元素，设置position:relative不会更改此设置，因此您无法将宽度和高度应用于元素。然后浏览器不会将宽度强制设为1px，而是您设置的边框等于1px。高度也不起作用，并且元素和边框的高度由font属性定义。

增加高度，您将看到什么都不会改变：

.first {
  background-color: #dc3545;
  color: #fff;
  font-size: 1.2rem;
  border: 1px #ccc solid;
  border-radius: 20px;
  padding: 5px 10px;
  margin-top: 10px;
}

.second {
  background-color: #6f42c1;
  color: #fff;
  font-size: 1.2rem;
  border: 1px #ccc solid;
  border-radius: 5px;
  padding: 5px 10px;
  margin-top: 10px;
  margin-left: 10px;
}

.second::before {
  content: "";
  top: -13px;
  left: -30px;
  border-left: 1px solid #aaa;
  border-bottom: 1px solid #000;
  border-radius: 0 0 0 0px;
  height: 600px;
  width: 50px !important;
}

<span class="first">First</span>
<span class="second">Second</span>

现在增加font-size，您会看到一些变化

.first {
  background-color: #dc3545;
  color: #fff;
  font-size: 1.2rem;
  border: 1px #ccc solid;
  border-radius: 20px;
  padding: 5px 10px;
  margin-top: 10px;
}

.second {
  background-color: #6f42c1;
  color: #fff;
  font-size: 1.2rem;
  border: 1px #ccc solid;
  border-radius: 5px;
  padding: 5px 10px;
  margin-top: 10px;
  margin-left: 10px;
}

.second::before {
  content: "";
  top: -13px;
  left: -30px;
  border-left: 1px solid #aaa;
  border-bottom: 1px solid #000;
  border-radius: 0 0 0 0px;
  height: 600px;
  font-size:50px;
  width: 50px !important;
}

<span class="first">First</span>
<span class="second">Second</span>

将CSS位置（在.second :: before中）设置为绝对位置时，将不考虑宽度，并显示水平线，但该线未将两个块连接在一起。

在添加position:absolute时，该元素将成为块级元素，因此您可以知道控制其宽度和高度，并且在您的情况下都将其考虑在内，但是由于没有定位祖先，因此您将元素相对于视口定位。由于您将左值设置为负值，因此看不到已设置的边框，因此该选项卡是隐藏的。

您需要设置跨度position:relative，以使伪元素相对于跨度定位：

.first {
  background-color: #dc3545;
  color: #fff;
  font-size: 1.2rem;
  border: 1px #ccc solid;
  border-radius: 20px;
  padding: 5px 10px;
  margin-top: 10px;
}

.second {
  background-color: #6f42c1;
  color: #fff;
  font-size: 1.2rem;
  border: 1px #ccc solid;
  border-radius: 5px;
  padding: 5px 10px;
  margin-top: 10px;
  margin-left: 10px;
  position:relative;
}

.second::before {
  content: "";
  position: absolute;
  top: -13px;
  left: -30px;
  border-left: 1px solid #aaa;
  border-bottom: 1px solid #000;
  border-radius: 0 0 0 0px;
  height: 26px;
  width: 50px !important;
}

<span class="first">First</span>
<span class="second">Second</span>

10.3.1内联不可替换元素

'width'属性不适用 ^ref

10.6.1内联不可替换元素

“高度”属性不适用。内容区域的高度应根据字体，^ref

浮点数，绝对定位的元素，不是块框的块容器（例如嵌入式块，表单元格和表标题），以及带有“溢出”而不是“可见”（除非该值已传播到视口）为其内容建立新的块格式设置上下文。 ^ref

在绝对定位模型中，相对于其包含的块
，框是明显偏移的
如果元素具有'position: absolute'，则包含块由最接近的祖先建立，其“位置”为“绝对”，“相对”或“固定”，...如果没有这样的祖先，包含块是初始包含块。 ^ref

CSS相对位置：不考虑宽度

1 个答案: