“父框的基线”的定义是什么？

Question

我很难理解10可视化格式化模型详细信息- W3C的以下摘录。

节选：

基线:将方框的基线与父框的基线对齐。如果方框没有基线，请将底部边距与父基准对齐。

在这种情况下，“父框的基线”意味着什么？“父框”是指由父元素建立的行框还是框？如何计算“父框的基线”？

Answer 1

规范告诉您父框指的是什么，上面只提到了几段：

以下值仅对父内联元素或父块容器元素的支柱有意义。

因此父框引用由父元素生成的框，并且计算父框的基线，就像计算任何其他元素一样。

Answer 2

我也没有找到具体的定义，根据规范：

以下值仅对父内联元素或父块容器元素的支柱有意义

您可以推断，如果父框中有一个文本节点作为子节点，则子文本节点的基线是父框的基线。

例如：

​

.parent {
  display: inline;
  background:pink;
  font-size:40px;
  font-family:Microsoft Yahei;
  line-height:2;
  vertical-align:baseline;
}
.element-child {
  font-size:25px;
}

<div class="parent">
   textNode child of parent 
  <span class="element-child">
    element-child with another font-size
  </span>
</div>

​

​

​

无论是否有子文本节点，父框的基线与子文本节点的基线处于相同的位置。

Answer 3

看看这幅画，看看基线到底是什么。

现在，让我们演示一下医生想说什么：

​

​

定义vertical-align: baseline时，元素将与父元素的基线对齐，如上面的图片所示。