行框基线的位置受该行中所有元素的影响。

      .short-box {
        width: 30px;
        height: 30px;
        background-color: pink;
        display: inline-block;
      }
      .box {
        background-color: bisque;
        margin-bottom: 10px;
      }
      .tall-box {
        width: 30px;
        height: 100px;
        background-color: pink;
        display: inline-block;
      }
      .text-bottom {
        vertical-align: text-bottom;
      }
      .text-top {
        vertical-align: text-top;
      }

      .bottom {
        vertical-align: bottom;
      }
      .top {
        vertical-align: top;
      }

  
    

      x
      
      
    
    

      x
      
      
    
    

      x
      
      
    

    

      x
      
      
    
  

为什么第一个框和第三个框的效果是一样的，而第二个框和第四个框的效果却不同。垂直对齐属性如何改变行框的基线？