详解 vertical-align 中的属性值

1. 概念理解

• 行内框：是一个浏览器渲染模型中的一个概念，确实存在但无法显示出来；简单说来，行内框 就是 一个元素内容区域的边界，即 行内元素的边框；改变行高line-height属性时，行内框高度 不变

• 行框（line box）：是一个浏览器渲染模型中的一个概念，确实存在但无法显示出来，一行的 行框高 等于 本行内所有元素 撑开的边框
  

• 基线、底线、顶线、中线、文本顶端、文本底端 是针对 行框 定义的，如下：

  • 基线：并不是汉字文字的下端沿，而是英文字母“x”的下端沿

• 基准元素：可简单理解为一行中内容最高的元素，行内框最高的元素，就是基准元素

2. 垂直对齐属性：vertical-align

• 默认初始值： baseline

• 继承性： 不继承

• 作用于： 行内元素、行内块元素

• 主要属性值的对齐方式，都是 针对 行框中的顶端、低端 和 基准元素中一些列基准线 对齐，如下：

值	描述	说明
inherit	继承父元素属性值	从父元素继承 vertical-align 属性的值
top	顶端对齐	将元素的 行内框的顶端 与 行框的顶端 对齐
bottom	底端对齐	将元素的 行内框的底端 与 行框的底端 对齐
baseline	基线对齐	将元素的 行内框的基线 与 基准元素中 文本行的基线 对齐
middle	中间对齐	将元素的 行内框的中线 与 基准元素中 文本行的中线 对齐
text-top	文本顶端对齐	将元素 行内框的顶端 与 基准元素中 文本行的顶线 对齐
text-bottom	文本底端对齐	将元素 行内框的底端 与 基准元素中 文本行的底线 对齐
super	垂直对齐文本的上标	将元素的基线 在基准元素的基线的基础上 升高
sub	垂直对齐文本的下标	将元素的基线 在基准元素的基线的基础上 下降
length / %	值可为负数	将元素的基线 在基准元素的基线的基础上 升高 / 下降固定的像素值

3. 示例

// css 样式
body {
    margin: 0;
}

.box {
    height: 200px;
    background: #ff0;
}


.sub {
    display: inline-block;
    height: 150px;
    line-height: 200px;
    width: 100px;
    background: red;
}

.main {
    display: inline-block;
    height: 200px;
    line-height: 200px;
    width: 100px;
    background: green;
}

// html 结构
<div class="box">
    <span style="vertical-align: top">top</span>
    <span style="vertical-align: bottom">bottom</span>
    <span style="vertical-align: baseline">baseline</span>
    <span style="vertical-align: middle">middle</span> 
    <span style="vertical-align: text-top">text-top</span>
    <span style="vertical-align: text-bottom">text-bottom</span> 

    <span class="sub">target</span>
    <span class="main">aa</span>
</div>

• 页面展现如下：
  

• 调试：

  • 随着 main 元素 line-height 属性值的变化，middle元素、text-top元素、text-bottom元素 的位置均发生变化（结论： 当 vertical-align属性值为 baseline 、middle 、text-top 、text-bottom时，元素的位置 随着 基准元素中 文本的位置 而改变）

  • 随着 main 元素 height 属性值的变化，bottom元素 的位置均发生变化（结论： 当 vertical-align属性值为 bottom 时，元素的位置 随着 行框中的高度 而改变）

  • 随着 sub 元素 line-height 属性值的增大，bottom元素 的位置均发生变化（结论：行框的高度 由本行元素内容 撑起）

  • 随着 box 元素 height 属性值变化，前六个 <span> 元素的位置都不发生变化（结论： 一行中，最外层容器的height 值，不会影响本行 行框的高度 ）

4. 总结：

• 一行中，最外层容器的 高度 与 本行的行框高度无关；行框高度是靠内容撑起来的

• 分析 vertical-align 属性值所展现的视图效果时，首先 需要先找到基准元素（一行中 行内框最高的那个元素）和 行框

  • 属性值 top 、botton 除外的其他属性值，都与 基准元素 中 文本位置有关

  • 属性值 top 、botton 与行框有关