CSS位置相对：宽度未考虑

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 ::之前）is set to relative时，不考虑宽度（以像素为单位），只显示垂直线，宽度“由浏览器强制”为1像素。

当CSS位置（在.second ::之前）is set to absolute时，不考虑宽度并显示水平线，但该线未加入两个块。

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

position：绝对/相对/静态/固定
显示：块/内联
溢出：自动/可见;

我已经看过以下问题了：

以下文章：

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

Answer 1

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

默认情况下，伪元素是内联元素，设置position:relative不会更改此值，因此您无法对元素应用宽度和高度。然后borwser没有强制宽度到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时，元素变为块级元素，因此您可以知道控制它的宽度和高度，并且在您的情况下都考虑了这两个元素，但是您的元素相对于视口定位，因为没有定位的祖先。它是隐藏的，因为您设置了负左值，因此您无法看到已设置的边框。

您需要使用span qazxsw poi来使伪元素相对于跨度定位：

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;
}

10.3.1内联，未替换元素

'width'属性不适用<span class="first">First</span> <span class="second">Second</span>

10.6.1内联，未替换元素

'height'属性不适用。内容区域的高度应基于字体ref

浮动，绝对定位元素，阻止不是块框的容器（例如内联块，表格单元格和表格标题），以及“溢出”除“可见”之外的块框（除非该值已传播）到视口）为其内容建立新的块格式化上下文。 ref

在绝对定位模型中，框相对于其包含块明确偏移

如果元素具有ref，则包含块由最近的祖先建立，其“位置”为“绝对”，“相对”或“固定”，...如果没有这样的祖先，则包含块是初始包含块。 'position: absolute'

CSS位置相对：宽度未考虑

问题描述投票：3回答：1

1个回答

最新问题

CSS位置相对：宽度未考虑

问题描述 投票：3回答：1

1个回答

最新问题

问题描述投票：3回答：1