<!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
值其实和行盒的基线没有半毛钱关系.个人鄙见. 更多推荐:
https://segmentfault.com/a/11...
https://segmentfault.com/a/11...