为什么verticalalign:textbottom和verticalalign:bottom的效果一致?
P粉633309801
P粉633309801 2024-04-02 09:45:45
0
1
485

行框基线的位置受该行中所有元素的影响。

      .short-box {
        width: 30px;
        height: 30px;
        background-color: pink;
        display: inline-block;
      }
      .box {
        background-color: bisque;
        margin-bottom: 10px;
      }
      .tall-box {
        width: 30px;
        height: 100px;
        background-color: pink;
        display: inline-block;
      }
      .text-bottom {
        vertical-align: text-bottom;
      }
      .text-top {
        vertical-align: text-top;
      }

      .bottom {
        vertical-align: bottom;
      }
      .top {
        vertical-align: top;
      }
  <body>
    <div class="box">
      x
      <span class="tall-box text-bottom"></span>
      <span class="short-box"></span>
    </div>
    <div class="box">
      x
      <span class="tall-box text-top"></span>
      <span class="short-box"></span>
    </div>
    <div class="box">
      x
      <span class="tall-box bottom"></span>
      <span class="short-box"></span>
    </div>

    <div class="box">
      x
      <span class="tall-box top"></span>
      <span class="short-box"></span>
    </div>
  </body>
</html>

为什么第一个框和第三个框的效果是一样的,而第二个框和第四个框的效果却不同。垂直对齐属性如何改变行框的基线?

P粉633309801
P粉633309801

全部回复(1)
P粉674757114

简而言之,因为短框突出于父内容框上方,但不突出于父内容框下方。


这是添加了相关框和线条的图像:

在每种情况下,绿色矩形显示行框所在位置,蓝色矩形显示父内容框所在位置,红线显示基线所在位置。

现在我们可以看到,在情况一和情况三中,高框分别与 text-bottombottom 对齐,父内容框的底部和行框的底部重合。因此,每个的对齐都解析为相同的排列。

在情况二和情况四中,高框分别与 text-toptop 对齐,父内容框的顶部和行框的顶部不重合,因此它们的布局不相同。 p>

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板