CSS中关于linebox的baseline位置移动的理解
前言
最近看到一篇文章，弗里得木的翻译笔记，里面有个问题没有解决，就是linebox的baseline为什么会移动呢？
在讨论这个问题之前读者需要对 默认值baseline 以及 其他属性值（天镶的博客）有一定了解。
下面详细描述这个baseline移动的问题，先上代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div { margin: 100px auto; width: 500px; background: #bbbbbb; font-size: 30px; } span.child { display: inline-block; border: 10px solid #0000cc; } span.big { display: inline-block; width: 100px; height: 200px; background: #FF6600; vertical-align: bottom; } /* 问题 child元素和文本框text的vertical-align的默认值为baseline， 将big元素的vertical-align分别设置为top、bottom、middle， 为什么child和text会随之移动？，而改变了veritical-align值的big元素却几乎没有移动 因为child和text的默认值为baseline，所以会移动是不是代表着linebox的baseline也移动了呢？ */ </style> </head> <body> <div> <span class="child">child</span> text <span class="big"></span> </div> </body> </html>
问题：
child和text的vertical-align的默认值为baseline，将big元素的vertical-align分别设置为top、bottom、middle，
为什么child和text会随之移动？而改变了veritical-align值的big元素却几乎没有移动。
因为child和text的默认值为baseline，所以会移动是不是代表着linebox的baseline也移动了呢？
我的想法：
其实baseline没有发生移动，只是CSS默认overflow不能向上溢出，所以只能强制把baseline的位置相对向下移动了。
上面这句话是本文的重点，理解了这句话后面就不用看了，后面将详细解释这句话。
正文
一、big元素的veritical-align设置为bottom
①首先，我们先把big元素给注释掉，只剩下child和text
②接下来我们把big元素vertical-align：bottom重新加上去，假设overflow可以向上溢出，那会出现这样的情况，以下属于个人yy
③可是没办法，overflow不能向上溢出，只能向下或向右溢出，现在就只能把这个盒子向下移动，并且保持父元素的margin-top为100px，于是乎，出现了这样的情况。
二、big元素的vertical-align设置为top
①首先，我们先把big元素给注释掉，只剩下child和text
②然后我们把big元素给加回来，因为vertical-align：top不会向上溢出，所以变成下面这样的情况
③到此就结束了，是不是还没明白我们在搞什么鬼，哈哈，那看看下面的总结。
总结
上面我们解释了为什么把big元素的vertical-align从bottom变为top后，big元素本身位置没有移动，
而child和text两个默认vertical-align为baseline却随之移动。
其实linebox的baseline并没有发生移动，只是overflow不能向上溢出，所以强制父元素盒子相对向下移动了。其他vertical-align设置为middle、text-top、text-bottom也是类似，这里就不再赘述了。
以上纯属个人的猜想，欢迎大家指正文章中不正确的地方，谢谢阅读。
