vertical-align只对inline-block、inline元素有效
0.基线怎么找
纯inline元素，比如图片，或者内部没有文字的inline元素，基线是最底部。如果有文字，那么基线是x的底部。
1.vertical-align各个值的意思：
某个元素设置了vertical-align，那么意味着：
- middle：拿自己的高度中点，去对齐父元素基线+0.5x。
- baseline：拿自己内部文字基线，去对齐父元素基线。
- top：拿自己的顶部，对齐这一行的最高点。
- bottom：拿自己的底部，对齐这一行的最底部。
2.例子
1.
一号盒子（one）：设置了vertical-align:middle。意味着，我拿我的高度中点线，去对齐父元素基线+0.5x。
二号盒子（two）：没有设置，默认vertical-align:baseline。意味着，我拿我的基线（内部字母底部），去对齐父元素基线。
三号盒子（three）：没有设置，默认vertical-align:baseline。同时，它也没有文字。那就拿自身元素的底部去对齐父元素基线。
<style>
.parent {
width: 1300px;
background-color: red;
display: inline-block;
position: relative;
height: 300px;
}
.one {
width: 400px;
background-color: yellow;
height: 200px !important;
vertical-align: middle;
}
.two {
width: 400px;
background-color: green;
}
.three {
width: 400px;
background-color: pink;
}
.box {
display: inline-block;
height: 800px;
}
</style>
<body>
<div class="parent">
<div class="one box">
<div>一号盒子</div>
</div>
<div class="two box">二号盒子</div>
<div class="three box"></div>
</div>
</body>
效果图：
2.
一号盒子（one）：设置了vertical-align:middle。意味着，我拿我的高度中点线，去对齐父元素基线+0.5x。
二号盒子（two）：设置了vertical-align:middle。意味着，我拿我的高度中点线，去对齐父元素基线+0.5x。
三号盒子（bottom）：设置了bottom。意味着，我的底部对齐同一行的底部。
<style>
.parent {
width: 1300px;
background-color: red;
display: inline-block;
position: relative;
height: 1300px;
}
.one {
width: 400px;
background-color: yellow;
height: 200px !important;
vertical-align: middle;
}
.two {
width: 400px;
background-color: green;
font-size: 40px;
vertical-align: middle;
}
.three {
width: 400px;
background-color: pink;
vertical-align: bottom;
height: 400px !important;
}
.box {
display: inline-block;
height: 800px;
}
</style>
<body>
<div class="parent">
<div class="one box">
<div>一号盒子</div>
</div>
<div class="two box">二号盒子</div>
<div class="three box">三号盒子</div>
</div>
</body>
效果图：
