vertical-align基础理解--参差不齐的盒子

记录学习难点之vertical-align!!!垂直居中（实际上是对齐）的含义理解
学霸应用指路：https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/ vertical-align和line-height的区别
1.适用范围：这个元素只对行内元素或者行内块元素有效，所以浮动元素定位元素display:block通通滚一边！
2.我们来看官方定义：
该属性定义：
行内元素的基线（甚至中线底线顶线什么的但是默认是基线）相对于该元素所在行的基线（这个道理同上）的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。非单元格用display:table-cell也行。

3.属性线分布图—盗的一个博主的不好意思⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄

4.定义解释

什么鬼什么鬼？！说什么呢？让我先解释一下后边的部分：
在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
–就是单元格里什么样单元格的文字就是什么样！vertical-align：middle就是垂直居中，bottom就是文字靠底部。其他的以此类推！

接下来解释重点部分！敲黑板！我当初看了半天也没看懂！
行内元素的基线（甚至中线底线顶线什么的但是默认是基线）相对于该元素所在行的基线（这个道理同上）的垂直对齐。
这句话的意思就是：重点重点！
如果你的元素使用了vertical-align:middle!那么！你这个元素的中线就会和你这个元素的行的基线线对齐！！！
注意：元素所在行的基线即line box 的基线等于这一行中没有经过任何人为对齐设置的文本的基线。
注意：但是top的意思就是和行内最高的元素顶端对齐，bottom指的是与行内最低的元素底端对齐。
接下来我们设置两个行内块盒子100*200，第二个的vertical-align设置为middle,其他的默认

注意：一个 inline-block 元素，如果里面没有内联元素，或者overflow不是visible，则该元素的基线就是其 margin 底边缘;否则其基线就是元素里面最后一行内联元素的基线。