css之vertical-align的理解与认识

一. 简介

1. vertical-align 数值,比如 -2, 相比于基线向下便宜2px,一般用来修复单选框/复选框和12像素文字大小不对齐的问题.

2. 百分比 此标签继承的line-height,但ie6和ie7会出现问题

3. top middle baseline bottom 可以比对英语的4条线来理解

4. 只有一个元素属于inline或者inline-block,时才会起作用

inline-block元素就是既可以混排,又可以设置宽高属性,比如图片,按钮,单/复选框,单行多行文本框等表单元素,默认会对vertial-align元素起作用.

vertical-align属性虽然只会在inline-block上起作用,但有时inline属性的位置也会发生变化,这不是因为对vertical-align属性敏感,而是受制于linebox属性而不得不发生变化.(并不是这样,很单纯的inline元素也是可以支持vertical-align属性的)

二. 生效 原理

1. 对于vertical-align:middle,参考手册上简单介绍是子元素位于父元素的中间

.box{background:black; color:white; padding-left:20px; line-height:10px;}
.dot{display:inline-block; width:4px; height:4px; background:white; vertical-align:bottom;}

结果如下截图：

bottom依赖父窗口的line-height,但text-bottom则不依赖,总是是跟窗口文字位置底部有关系

2. 一种复杂的布局,span里面嵌套img和div(inline-block),定义line-hight,然后文字就居中了,可以再调整img和span的垂直方向

vertical-align的本质上是个独立的个体，与后面的line水平的元素是不存在直接的关系的。两者没有必然的联系，这是一个需要认识清楚的重要的东西

3. 对于2来讲,一般情况下,line-hight一般都会小与外层的content area,那么vertical-align对文字的影响就是显而易见的了.

小图标+文字,设置text-top,ie和其他浏览器区别是不明显的

我们可以参见下面的测试代码，一窥IE家族和现代浏览器下text相关vertical-align的差异表现：

<div style="line-height:200px; border:1px solid #34538b;">
    <span style="font-size:60px; border:1px solid #a0b3d6; vertical-align:text-top;">大大的文字</span>后面是静止的文字。
</div>

ie7跟我想象的一样,外层高度200,大小文字顶部对齐,但ie8直接多了一个距离,而现代浏览器,高度不仅高了很多,顶部也没有对齐....

text-top解释: 当前元素的顶部跟父元素字体的顶部对齐

复习line box中的几个重要概念,content area, inlinebox (匿名inlinebox)以及inlinebox组成的linebox

一些东西直接copy吧,因为写的实在太晦涩了...

2. 每个inline属性的标签外部都有一个inline box，这个inline box是看不见的，这个看不见的inline box扮演者重要的角色，此box与CSS中的line-height属性相互配合构成了元素高度堆叠的基础。以我的理解，inline box的高度纯粹就是有元素的line-height或是继承的line-height值决定的。例如本实例中，父div的line-height为200像素，自然，含“大大的文字”的span标签所在的inline box的高度就是200像素，换句话说，这个含有vertical-align:text-top属性的span标签的实际高度是200像素。

3. 本实例中有一段文字“后面是静止的文字”外部并未直接包裹任何标签，但是这段连续的文字外部也包裹了一个看不见的inline box（称之为匿名inline box），其本质以及一些表现与inline box几乎无异。也能占据200像素的高度。

4. span标签外部不可见的inline box以及文字所在的匿名inline box共同组成了line box，line box也是不可见的，每行文字有且仅一个line box，line box的高度有其内部的一系列的inline boxes高度共同决定，由内部的inline boxes的上下最大绝对差值决定的。例如本实例红，在现代浏览器下，外部div的高度之所以会被撑开，是内部两个inline boxes共同作用的结果。

所以结合上面的简单分析，本实例中含有vertical-align:tetx-top属性的span标签实际的box区域应该如下图半透明绿色区域：

注意:这里的重点在文字上 text-top

IE8的解释估计是只以文字顶部为标准.,所以会下沉27(60-16)/2,