第一回：vertical-align家族基本认识

——了解vertical-align支持的属性值以及组成

inherit

  1. 线类

    baseline, top, middle, bottom

  2. 文本类

    text-top, text-bottom

  3. 上标下标类

    sub, super

  4. 数值百分比类

    20px, 2em, 20%, ...

数值类 + 百分比类

  1. 共性
  2. 五根指头不够用

    共性

  1. 都带数字

    20px, 2em, 20%, ...

  2. 都支持负值

    -20px, -2em, -20%, ...

  3. 行为表现一致

行为表现机制

一个文字和一个妹子：

某妹子：

请选择：

在baseline对齐基础上上下偏移对应数值大小。

百分比类的差异

vertical-align的百分比值是相对于line-height计算的！

一个文字和一个妹子 - again：

某妹子：
line-height[0px]:

vertical-align[0%]:

IE6/IE7下vertical-align百分比值不支持小数line-height

vertical-align和line-height是一对好基友！

下回预告：vertical-align起作用的前提

——探讨各种display值对vertical-align的影响