css - 设置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>行盒的基线从未改变, 它只是一个对齐参考线而已.
首先需要明确以下几点, 在题主代码情形中, 块盒 .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 值其实和行盒的基线没有半毛钱关系.
个人鄙见. 更多推荐:
这篇关于css - 设置vertical-align后baseline改变位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
