css属性之vertical-align详解

inline-block

该值会让元素生成一个内联级块容器（inline-level block container）。一个inline-block的内部会被格式化成一个块盒，而该元素本身会被格式化成一个原子内联级盒

原子内联级盒

不属于内联盒的内联块级盒（例如，可替换内联级元素，inline-block元素和inline-table元素）被称为原子内联级盒（atomic inline-level boxes），因为它们作为单一的不透明盒（opaque box）参与其内联格式化上下文。

line-height

1. 对于一个内容由内联级元素组成的块容器元素，'line-height'指定了元素内行盒的最小高度。这个最小高度包含基线上方的最小高度和下方的最小深度，就像每个行盒以一个具有该元素的字体和行高属性的0宽内联盒开始。

2. 对于不可替换的内联元素，'line-height'指定了用来计算行盒高度的高度。

vertical-align

该属性会影响由一个内联级元素生成的盒的行盒内部的竖直定位。
Percentage: 决定于元素自身的line-height。

行盒：line-box

定义：
（盒的排布方式，不是行盒）在一个内联格式化上下文中，盒是一个接一个水平放置的，从包含块的顶部开始。这些盒之间的水平margin，border和padding都有效。
（盒的对齐方式，不是行盒）盒可能以不同的方式竖直对齐：以它们的底部或者顶部对齐，或者以它们里面的文本的基线对齐。
（什么是行盒）包含来自同一行的盒的矩形区域叫做行盒。

line-box的宽： 由包含块和浮动状况来决定。（包含块指：一般把生成的盒作为后代盒的包含块，我们说一个盒为其后代“建立”了包含块。“一个盒的包含块”表示“盒所在的包含块”，而不是它生成的包含块）

line-box的高：

1. 计算行盒中每个内联级盒的高度时，对于可替换元素，inline-block 元素和inline-table元素，这个值就是其margin box的高度；对于内联盒，这个值是其line-height
2. 内联级盒是根据其vertical-align属性竖直对齐的。如果它们是'top'或者'bottom'对齐，它们必须对齐得让行盒高度最小化。如果这样的盒足够高，存在多个解，而CSS 2.1没有定义行盒基线的位置
3. 行盒高度是最高的盒的top与最低的盒的bottom之间的距离。（定位之后的最高和最低）

vertical-aligh可选值分析

baseline：把盒的基线与父级盒的基线对齐。如果该盒没有基线，就把bottom margin边和父级的基线对齐。（为默认值）这里我们需要知道什么是baseline，baseline在不同的盒子里有什么样的表现。

基线（图片来自张鑫旭博客）

基线就是小写x的底部挨着的那条线。基线与文字密切相关。

上代码

    

        xX
        xX
        baseline s1
        middle x
        text-top s2
        xX
        text-bottom s2
        xX
        xX
        
        xX
        xX
        
  

删除了一些不是重点的css
p{font-size:30px;}
.s{ font-size:40px;}
.sm{vertical-align: middle;}
.s1{vertical-align:baseline;}
.s2{vertical-align:text-top;}
.s3{vertical-align:text-bottom}
.sp{vertical-align:baseline;font-size: 30px;}
.b{font-size: 60px;}
.block{display: inline-block;vertical-align: baseline;margin-bottom: 10px;}
.sp2{padding: 10px;vertical-align: baseline;}

代码如上

我们知道字母的基线是x底部的那一条线，那么在一个盒子里，这个盒子的基线在哪里？（css2.1规范没有明确规定行盒基线的位置，他引入了一个假想盒strut的概念。具体的可以去规范查看。）

看图，1号为p标签内的文本，无其他标签包裹。2号为span标签内vertical-align值为baseline的文本。而baseline的定义为将该盒的基线与父盒的基线对齐。可以看到我画出的那一条红线（x底部），由此得出这个由p标签创建的块盒的基线就是标签内文字x底部的线。2号与3号仅字体大小不同。

middle：把该盒的竖直中点和父级盒的基线加上父级的半x-height对齐

4号为vertical-align值为middle的span标签。他的竖直中点应于1号的小写x的中心点在同一水平线上。同样我也画了一条红线。

text-top：把该盒的top和父级的内容区（content area）的top对齐

5号为vertical-align值为text-top的span标签。6号与2号相同，放在旁边用来做对比，我们可以看出，5号和6号的top其实是对齐的。

为什么不用5号与1号对比呢？首先，无法给1号这个匿名盒子局部上色，没法让大家看到他的top在哪里。其次6号与1号baseline对齐，且字号相同，可以用它来替代1号与其他作对比。

为什么5号的top不与他的父元素p的top对齐呢？我认为，规范所讲的父级的内容区，应当是指如1号一样的匿名盒区域。

在张鑫旭的博文里指出，该盒的top是由line-height决定，line-height越大，此盒真正的高度约高，虽然不显示出来。（为inline属性的盒）

若盒为block，他的top就是显示出来的顶部。

所以在使用这个值的时候，要明白什么才是真正对齐的目标。

text-bottom：把该盒的bottom和父级的内容区的bottom对齐。

看7号与8号的比较。与text-top基本相同。

9号，10号，12号，13号的表现

9号是为了展示行盒的高度是由一行内的所有盒子的最高值与最低值决定的，无其他意思。

10号与11号对比，展示了，inline属性的盒子若为空，不影响他的vertical-align属性，和有内容时表现行为相同。

12号展示了，当inline-block属性的盒子不为空时，他的vertical-align属性不受影响，与inline盒子表现相同。

13号展示了，当inline-block属性的盒子为空时，vertical-align的值baseline的表现为，该盒子的marginbox与父元素的baseline对齐。

'inline-block'（盒）的基线是它的最后一个常规流中的行盒的基线，除非它没有流内行盒或者它的'overflow'属性的计算值不为'visible'，此时基线是bottom margin边.

一个盒子只有一条基线吗？

限定p的宽度，两条基线

如上所示，我只改变了p标签的宽度，其他属性均未改变。由此截图可得出，一个盒子有多少条基线，应当取决于他有多少个行盒。我们之前所讲的基线应当指的是行盒的基线。
所以由此得出，不论是block盒,inline盒,还是inline-block盒，基线都是他们盒内的行盒的基线。这三者并无区别。