理解直列elemnt，垂直对齐，线箱和行高

更新（问题解决）理解直列elemnt，垂直对齐，线箱和行高

垂直对齐：底部，指底部直列箱其线箱的底部相匹配，所以在我的情况下，span2的内联框是绿色的，它的行高是100px，从父项继承。它的行箱是黑色的，也有行高：100px。所以他们是底部对齐。看到图：

我已经了解到：

1.立式对齐仅适用于在线/ inline-block的元素

2.vertical对齐是基于行高，而不是其容器的高度！

3.在一个线框中，它的line-height是行高最高的内联框的行高（在我看来，它是inline-element或inline-block元素）。像图：

一切工作inline-block的元素很好，但它似乎有与内嵌式元件的问题。

解释：

父：高度：200像素，行高; 100像素;

div.child：inline-block，vertical-align bottom;

SPAN1：直列，行高：直列，行高：从母体，它是100像素

跨距2继承底部：从母体，它是100像素，垂直对齐继承。

对我来说，行框下面的代码是这样的（你可以先运行代码）：

为跨距2奇怪的行为！如果将垂直对齐设置为文本顶部或文本底部，则会变得更加奇怪

另一件我感兴趣的事情是，如果我将跨度显示设置为内嵌块或设置跨度的行高到正常（这是它的字体大小的1.16），一切工作正常。

有人能解释吗？由于

div.parent { 
 
    width: 300px; 
 
    background-color: coral; 
 
    /*key-part*/ 
 
    height: 200px; 
 
    line-height: 100px; 
 
} 
 

 
div.child { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: yellow; 
 
    /*key-part*/ 
 
    display: inline-block; 
 
    vertical-align: bottom; 
 
    line-height: normal; 
 
} 
 

 
.span1 { 
 
    background-color: white; 
 
    font-size: 50px; 
 
    /*key-part*/ 
 
    vertical-align: middle; 
 
} 
 

 
.span2 { 
 
    background-color: green; 
 
    font-size: 12px; 
 
    /*key-part*/ 
 
    vertical-align: top; 
 
}

<body> 
 
    <div class="parent"> 
 
    <div class="child">inline-block div</div> 
 
    <span class="span1">Text1</span> 
 
    <span class="span2">Text2</span> 
 
    </div> 
 
</body>

来源

2017-04-09 JungleDesigner

答案没有提到的一个问题是“将跨度的行高设置为正常（它是其字体大小的1.16）”，这并非总是如此。根据[MDN]（https://developer.mozilla.org/en/docs/Web/CSS/line-height）的说法，大多数浏览器的字体大小约为1.2，然后围绕整个像素，但取决于字体。 #Values）。 –

让我们试着去掩盖它一步一步：

1。垂直对齐仅适用于内联/内联块元素

垂直对齐适用于内联级元素。这是目前的内联，内联块，内联表，内联flex，内联网格。垂直对齐也用于表格单元格，但方式不同。

2.垂直对齐基于行高，而不是其容器的高度！

除表格单元格外，正确。

3.在一个线框中，它的line-height是内联框的行高（在我看来，它是inline-element或inline-block元素），它具有最高的行高。

这对于简单的情况是正确的，但对于复杂的对齐情况则不正确。更好的近似是这样的。删除所有垂直对齐的元素：顶部和垂直对齐：底部。将所有其他元素对齐，以使它们的垂直对齐线相互平齐。将包含它们的框从对齐元素的最高层调用到对齐元素的最底部，即原始线框。然后线框的实际高度就是原线框的高度和顶部和底部对齐的所有元素的高度的最大值。

现在规范你的问题的相关部分是这样的：

...内联非替换元素，用于对准盒子的高度为“线箱 - 高度“（包含盒子的字形和每侧的半开，见上）。对于所有其他元素，用于对齐的框是边距框。

因此，对于span2，绿色背景区域是盒子的字形，其上方是每个字形的上半部分，这是从容器块元素继承的100px行高获取的值。这是与线框顶部对齐的这些半前端的顶部，而不是绿色背景区域的顶部。

另一方面，行内块div对齐行框的底部，在其底部边界的底部，而不是任何半前行。

来源

2017-04-09 14:17:01 Alohci

感谢您的回答，也许我需要更多地阅读一些内容，但现在仍然很难理解您所说的内容。但是，谢谢你们一切！ – JungleDesigner

理解直列elemnt，垂直对齐，线箱和行高

回答

相关问题