vertical-align案例分析

暴雨先生
534 阅读3分钟 
声明：本文引用了许多别人的东西，仅作个人学习总结之用。

内容概要：

  1. 案例展示
  2. 基础知识介绍：line box、baseline、vertical-align
  3. 案例分析解答

注：本文的基础知识参考深入理解css中vertical-align属性、想要清晰的明白（二）CSS 盒模型Block box与Line box。在此只介绍与本案例分析解答相关的知识，详细基础知识介绍请参阅前述链接，写的都很棒。

案例展示

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <title>document</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      border:1px solid red;
      display: inline-block;
    }
  </style>
</head>
<body>
  <main>
    <div></div>
    <div>为什么？</div>
  </main>
    
</body>
</html>

如上所示的html所得到的样式如下图所示：

案例

问题：为何会产生上图的情况？

基础知识介绍

line box(注意区分line box 和 inline box)

line box具有三个要点：

  • 每一行即成为一个line box，它由这一行的许多inline box组成。
  • 它的高度可以直接由line-heignt决定。
  • 多个line boxes的垂直堆叠就组成了containing box的高度，也即div,p等标签的高度。

baseline

由于baseline知识很多，文章开头的第一个链接介绍已然很详尽，在此只介绍与本案例分析有关的几个知识。

  • line box的baseline

    • line box的baseline就是该行中最后一个inline box的baseline
    • inline box的baseline视该inline box的情况而定：
      • 可能为inline-block元素
      • 可能为inline元素
        • baseline为最后一行文本的baseline（文本的baseline参考文章开头链接1）
      • 可能为匿名元素，也即纯文本
        • baseline为这行文本的baseline（文本的baseline参考文章开头链接1）

  • inline-block 的baseline

    • 规则1：该inline-block元素，如果内部有line box, 则该inline-block元素的baseline就是属于它的最后一个line box的baseline。以此类推。
    • 规则2：如果内部没用line box, 或者它的overflow不是visible,那么baseline将是这个inline-block元素的margin-bottom边界。

vertical-align

  • 定义：inline box的baseline 和 它的line box的baseline 的对齐方式

  • 可取值:

    • 基于baseline定位的取值：：baseline | sub | super | text-top | middle | text-bottom | percentage | length | inherit
    • 基于line box中元素的定位取值：top | bottom
      • 这种取值时，baseline不再起作用
      • top: inline box的margin-top边界与line box中的最高元素的顶端（margin上边界）对齐
      • bottom: inline box的margin-bottom边界与line box中的最低的元素的顶端对齐。

  • 默认值：baseline，即inline box的baseline与其所处的line box的baseline对齐。

案例分析解答

回到案例展示中的问题，为何会产生那种情况？

分析过程：

  1. 确定两个div的baseline 和 它们所处的line box的baseline

    1. 第一个div的baseline为它的margin-bottom边界
    2. 第二个div的baseline为文本内容‘为什么？’的baseline
    3. line box的baseline为第二个div的baseline

  2. vertical-align的默认值为baseline，所以第一个div的baseline要与line box的baseline对齐。所以，整个line box被撑高，就形成了案例图所示的情况。

    注：可能是第一个div上移，也可能是第二个div下移，视line box的位置而定。如果line box的上边界是视窗的边界，那么就是第二个div下移，反之第一个div上移。

解决方法：

  1. 设置任何一个div或者全部两个div的verticl-align: top | bottom。取消掉baseline定位。
avatar
文章
阅读
粉丝