设置vertical-align后baseline改变位置

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>vertical-align的理解</title>
    <style>
        .block {
            display: block;
            background-color: #bbb;
        }

        span.child2 {
            font-size: 50px;
            /* vertical-align默认值为: baseline; */
        }

        .child1 {
            display: inline-block;
            margin: 10px 0;
            border: 10px solid bisque;
            font-size: 32px;
            /* vertical-align默认值为: baseline; */
            background-color: aliceblue;
        }

        span.big {
            width: 20px;
            height: 400px;
            background: #FF6600;
            display: inline-block;
            vertical-align: bottom;
        }
        /*
        
         问题
         将橙色big元素的vertical-align改为top之后，
         为什么child1和child2元素会上升？
         是不是说明linebox的baseline发生了改变？
         如果是的话，为什么baseline会改变呢？
        */
    </style>
</head>
<body>
<div class="block">
    <div class="child1">child1</div>
    <span class="child2">child2</span>
    <span class="big"></span>
</div>
</body>
</html>

阅读 4.5k

行盒的基线从未改变, 它只是一个对齐参考线而已.

首先需要明确以下几点, 在题主代码情形中, 块盒 .block 的高度计算方式是:

如果该元素只有行内级子元素，其高度为最上行盒的顶部到最下行盒的底部的距离。

而 vertical-align 值为 baseline 意味着:

把盒的基线同父盒的基线对齐。如果盒没有基线，对齐盒的下外边距边缘与父盒的基线。

top 意味着:

把对齐了的子树顶部同行盒顶部对齐。

bottom 意味着:

把对齐了的子树底部同行盒底部对齐。

接着, 分别探讨各子元素在行内格式化上下文的对齐情况.

对于 .child1, 其 vertical-align 计算值为 baseline, 且其内部有行盒(因为存在文本), 因此将内部最后一个行盒的基线(也就是那文本 "Child1" 的基线)对齐于其所在行盒的基线(为描述方便, 下图中称之为 ".block基线"), 作图可以表示如下:

图片描述

对于 .child2, 其 vertical-align 计算值为 baseline, 故将文本 "Child2" 的基线对齐行盒的基线, 布局也很简单:

图片描述

一直到这个时候, 梳理下各种关系:

.child1 和 .child2 在一个行盒内, 这个行盒撑起了 .block 的高度;
故, .block 此时的顶(底)部即该行盒的顶(底)部.
.child1 是这个行盒的最上和最下, 因此 .child1 撑起了行盒的高度;
故, 该行盒此时的的顶(底)部即 .child1 的顶(底)部.

下面就是令题主困惑的 .big:

如果其 vertical-align 计算值为 top, 那将它的顶部与行盒的顶部对齐, 即与 .child1 的顶部对齐, 得:

图片描述

如果其 vertical-align 计算值为 bottom, 那将它的底部与行盒的底部对齐, 即与 .child1 的底部对齐, 得:

图片描述

以上是布局的模拟过程. 因此, .big 的 vertical-align 的 top 或 bottom 值其实和行盒的基线没有半毛钱关系.

个人鄙见. 更多推荐:

设置vertical-align后baseline改变位置

如何自定义设置虚线边框的样式？

只用一个div，宽高固定，文本内容不固定，能不能实现水平、垂直居中，超出两行显示省略号？

为什么这个动画一直在抖动?

怎么把一个矩形div变成一个直角三角形？

如何实现前端视频流的处理和优化？

通栏banner图片，如何不变形且内容完全显示不裁剪啊？

有哪个开源的js时间插件支持，年，季度，月，周，日范围选择？

设置vertical-align后baseline改变位置

如何自定义设置虚线边框的样式？

只用一个div，宽高固定，文本内容不固定，能不能实现水平、垂直居中，超出两行显示省略号？

为什么这个动画一直在抖动?

怎么把一个矩形div变成一个直角三角形？

如何实现 前端视频流的处理 和优化？

通栏banner图片，如何不变形且内容完全显示不裁剪啊？

有哪个开源的js时间插件支持，年，季度，月，周，日范围选择？

如何实现前端视频流的处理和优化？