CSS基线对齐的理解以及处理

相信大家都会遇到同行不同盒子中文本的内容不能对齐的情况，而不知道这是为何？其实这是因为基线对齐的原因。

什么是基线对齐？
先让我们来看一张图片：

到这里我们的疑惑是不是少了一些？基线对齐其实就是指英文字母`a、i、n、s`这些字母的底部，它跟中文字符的底部的含义是不同的。

那我们再看一下实测：

<div class="box1">
    哈哈
  </div>
  <div class="box2">
    呵呵
  </div>

<style>
    .box1 {
      display: inline-block;
      width: 100px;
      height: 100px;
      background-color: red;
      color: white;
      font-size: 48px;
    }
    
    .box2 {
      display: inline-block;
      width: 50px;
      height: 50px;
      background-color: blue;
      color: white;
      font-size: 16px;
    }
  </style>

这时候的对齐方式是没什么问题的（浏览器默认字符大小16px）
再我先来改变一下字符的大小看看，将.box1的字符改为48px：

.box1 {
      display: inline-block;
      width: 100px;
      height: 100px;
      background-color: red;
      color: white;
      font-size: 48px;
    }

可以看到两个盒子文本距离底线有明显的不同，那么更换下盒子字符看看？

这时候可以看到很明显的区别，这就是基线对齐。

那我再来看看不改变文字大小，改变文字的行数看看：

<div class="box1">
    哈哈哈哈哈哈哈哈哈哈哈哈
  </div>
  <div class="box2">
    呵呵
  </div>

这说明文字的基线对齐是相对于最后一行文字来说的！
那对于这种情况，如果我们想自定义垂直方向上的对齐方式改怎样呢？
在CSS中有个属性vertical-align是设置垂直方向上的对齐方式的，我们只需要在同一行的任一个选择器，或者父亲节点的样式上设置改属性就行。

.box1 {
      display: inline-block;
      width: 100px;
      height: 100px;
      background-color: red;
      color: white;
      vertical-align: top;
    }

vertical-align可能的值的列表如下：