基线对齐

元素的 垂直方向 对齐方式，默认是 基线对齐，baseline

inline 元素、inline-block 元素，在同一行时，每个元素在 垂直方向 上的对齐方式

提示： block元素独占一行，不存在垂直方向的对齐

vertical-align 样式

垂直方向对齐，是由 vertical-align 样式决定，默认值是 baseline ，即：基线对齐

基线对齐例子1

行内块级元素 没有内容 时，如：绿色方块，其 底部 与 输入框的 光标底部 对齐，如下图：

代码

<style>
    .s{
        display: inline-block;
        width: 100px;
        height: 50px;
        background-color: green;
        /* margin-top: 20px; */
    }
    input{
        height: 30px;
    }
    .box{
        background-color: #CCC;
    }
</style>

<div class="box">
    <input type="text"> <span class="s"></span>
</div>

基线对齐例子2

行内块级元素 有内容 时，如：绿色方块，其 字母 a 的底部 与 输入框的 光标底部 对齐，如下图：

代码

<style>
    .s{
        display: inline-block;
        width: 100px;
        height: 50px;
        background-color: green;
        /* margin-top: 20px; */
    }
    input{
        height: 30px;
    }
    .box{
        background-color: #CCC;
    }
</style>

<div class="box">
    <input type="text"> <span class="s">a</span>
</div>

修改对齐方式

浮动

可以让一个元素浮动，就不会影响另一个元素

相对定位

通过相对定位设置垂直方向位置

绝对定位

通过绝对定位设置垂直方向位置，脱离文档流，不占用原来的空间，可任意调整垂直位置，不影响其他元素

参考：
https://www.jianshu.com/p/0244c1459853
https://blog.csdn.net/weixin_43324314/article/details/106894148
https://www.runoob.com/cssref/pr-pos-vertical-align.html