3

请运行演示：

* {
  margin: 0;
  padding: 0;
}

.body {
  font-family: Microsoft Yahei;
  font-size: 16px;
  background-color: lightblue;
  height: 400px;
  width: 400px;
  line-height: 2;
  vertical-align: baseline;
}

.body span {
  background-color: pink;
}

.body .inline-block {
  display: inline-block;
  background: orange;
  height: 50px;
}

.inline-block.text {
  vertical-align: text-top;
}
<div class="body">
  <span>
words-g words words-g
  <span class="inline-block text">with inline-block box child</span> words-g w
  </span>
</div>

关键是我设置

.inline-block.text {
  vertical-align: text-top;
}

根据规范：

在以下定义中，对于内联非替换元素，用于对齐的框是高度为“行高”的框（包含框的字形和每边的半前导，见上文）。对于所有其他元素，用于对齐的框是边距框。

在“行高”部分：

在内容由行内元素组成的块容器元素上，'line-height' 指定元素内行框的最小高度。最小高度由基线上方的最小高度和基线下方的最小深度组成，就像每个行框都以具有元素字体和行高属性的零宽度行内框开始一样。我们称那个假想的盒子为“支柱”。（这个名字的灵感来自 TeX。）。

所以，在这种情况下，.inline-block.text是

  • 内容由行内元素组成的块容器元素
  • 其高度为 50px，行高为 32px
  • 也是一个内联不可替换元素

这是我的问题：

用于对齐的框是高度为'line-height'的框

  1. 在这种情况下，上面的方框点是.inline-block.text什么？

如演示所示，我认为它是高度为 50px 的框。但是，盒子的高度不是与上述规范冲突的行高。所以，我很困惑，不明白规范中的上述句子。

  1. 如果你认为上面的盒子是高度为 50px 的盒子，你如何解释高度 50px 不是 line-height 32px 的事实？

请注意：

  • 我只是想理解这句话，即用于对齐的框是高度为'line-height'的框，这样我可以更好地理解垂直对齐。

  • 我不是要一个具体的解决方案。

无论如何感谢您的帮助！

4

2 回答 2

1

该声明

对于内联非替换元素，用于对齐的框是高度为'line-height'的框

不适用于内联块。内联块不是内联元素。内联元素是带有display: inline, 并生成内联框的元素。内联块不是内联框，而是内联级别（“-级别”部分很重要！）块容器框。因此，声明

对于所有其他元素，用于对齐的框是边距框。

相反，这会vertical-align: text-top导致 inline-block 的顶部外边缘与 line box 的顶部对齐。

规范中任何适用于内联元素的部分都不适用于内联块。

于 2018-05-19T12:54:15.333 回答
0

我猜您对对齐的参考感到困惑（它与什么对齐？）。

我将尝试用简单的话来解释这一点。vertical-align与元素一起使用时，a您将其相对于其父元素对齐，无论是（是参考）b 的高度。使用正确的词是这样的：ab

垂直对齐属性可以在两种情况下使用：

将内联元素的盒子垂直对齐在其包含的行 盒子内。例如，它可以用于<img>在一行文本中垂直定位一个。参考

所以a元素是内联元素的盒子，b元素是包含行的盒子，它的高度b由它的line-height定义，正如您在规范中已经阅读的那样。

现在让我们考虑您的代码并逐步添加属性。

最初让我们删除inline-block

.body {
  font-family: Microsoft Yahei;
  font-size: 16px;
  background-color: lightblue;
}

.body span {
  background-color: pink;
}

.body .inline-block {
  background: orange;
}

.inline-block.text {
  vertical-align: text-top;
}
<div class="body">
  <span>
words-g 
  <span class="inline-block text">inline-block</span> words-g w
  </span>
</div>

如您所见，内部跨度与外部跨度具有相同的height/line-height并且两者都使用相同的font-family。text-top所以从逻辑上讲，当用作垂直对齐时，我们什么也看不到。

现在让我们添加line-height:2到容器中：

.body {
  font-family: Microsoft Yahei;
  font-size: 16px;
  background-color: lightblue;
  line-height:2;
}

.body span {
  background-color: pink;
}

.body .inline-block {
  background: orange;
}

.inline-block.text {
  vertical-align: text-top;
}
<div class="body">
  <span>
words-g 
  <span class="inline-block text">inline-block</span> words-g w
  </span>
</div>

在这种情况下，两个 span 都将继承，line-height:2因此计算的值将是32px( 2 * font-size)，这将使顶部引用与 text-top不同。为了提醒这一点，这是我在参考之前与您分享的一个数字：

文本基线的位置

如果我们阅读关于 的值的text-top定义vertical-align：

将元素的顶部与父元素 字体的顶部对齐。

所以内部跨度的顶部将与外部跨度的文本顶部对齐，这就是它移动到底部的原因。然后主容器的高度.body将不等于32px但它会更大，因为它会考虑内部跨度的移动（我们将有37px）。

现在让我们添加inline-block到内部元素：

.body {
  font-family: Microsoft Yahei;
  font-size: 16px;
  background-color: lightblue;
  line-height:2;
}

.body span {
  background-color: pink;
}

.body .inline-block {
  background: orange;
}

.inline-block.text {
  vertical-align: text-top;
  display:inline-block;
}
<div class="body">
  <span>
words-g 
  <span class="inline-block text">inline-block</span> words-g w
  </span>
</div>

您会注意到的第一件事是文本没有移动，但橙色背景覆盖了更大的高度。这是因为我们的元素将表现为块容器，这个高度是line-height文本的高度（32px），这也是上图中顶部和底部之间的距离（最初它是从text-bottom到text-top）。

它也像.body元素的蓝色背景，因为这是一个块元素。尝试制作.body元素inline，看看会发生什么。

现在你也可以给元素添加一个特定的元素并且什么都不会改变，因为我们相对于父元素height对齐。您还可以使用所有 vaues来查看不同的行为：vertical-align

.body {
  font-family: Microsoft Yahei;
  font-size: 16px;
  background-color: lightblue;
  line-height:2;
  margin:5px;
}

.body span {
  background-color: pink;
}

.body .inline-block {
  background: orange;
}

.inline-block.text {
  display:inline-block;
  height:50px;
}
<div class="body">
  <span>
Align the 
  <span class="inline-block text" style="
  vertical-align: text-top;">top of this</span> with text-top
  </span>
</div>

<div class="body">
  <span>
Align the 
  <span class="inline-block text" style="
  vertical-align: top;">top of this</span> with top
  </span>
</div>

<div class="body">
  <span>
align the 
  <span class="inline-block text" style="
  vertical-align: text-bottom;">bottom of this</span> with text-bottom
  </span>
</div>

<div class="body">
  <span>
align the 
  <span class="inline-block text" style="
  vertical-align: bottom;">bottom of this</span> with bottom
  </span>
</div>

于 2018-05-19T12:46:00.980 回答