我在前几天的文章《CSS文字控制技术总结》中介绍了关于用CSS控制文本的一些属性。其实过程很是纠结，因为当时有其他事在催着我导致文章写的不是很满意。我又比较懒，觉得大致上已经说明完毕不想再改了。今天上午突然觉得有一个知识点我还是简单介绍一下的好。这个就是vertical-align属性。
由于这货的值比较多再加上是在垂直方向来控制文本，所以显的很重要。虽然大多数时候我们不会用到这个属性，但是追求完美的我们肯定不会错过这么精彩的属性的是吧。强迫症伤不起啊！
需要强行记忆的是vertical-align属性只能运用于行内元素才能生效——即display:inline/inline-block;。现在引用下vertical-align属性的到底有哪些。
vertical-align属性值
| 值 | 描述 |
|---|---|
| baseline | 默认。元素放置在父元素的基线上。 |
| sub | 垂直对齐文本的下标。 |
| super | 垂直对齐文本的上标 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| text-top | 把元素的顶端与父元素字体的顶端对齐 |
| middle | 把此元素放置在父元素的中部。 |
| bottom | 把元素的底端与行中最低的元素的底端对齐。 |
| text-bottom | 把元素的底端与父元素字体的底端对齐。 |
| length | 如：2em、10px。允许使用负值。 |
| % | 使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。 |
| inherit | 规定应该从父元素继承 vertical-align 属性的值。 |
在上一篇文章中我也提到了这里面比较重要的概念就是基线(baseline)，点了这个技能点我们才能开启vertical-align属性天赋树，也就说它不是过路天赋点而是前置天赋点。继续复习上一篇文章中提到的基线，这里我重新调用一下关于基线的图。
文字排版中几条基准线概念
从上图可以很直观的了解到基线、顶线、中线、底线的含义，而且还附带介绍了行高和行距的概念，买一送一绝对实惠，是不是很激动？前面也说了基线是前置天赋点，想要将最终的vertical-align大招给点出来，还需要升级一些过路天赋。这个大招的前置技能还是很繁琐的，除了开启技能树的“基线”，还有一些其他技能点，而且还要求必须到一定等级。看到这里我想你心里肯定会涌现出一个熟悉的旋律——“知道真相的我眼泪掉下来”
知道真相的我眼泪掉下来
学习本来就是一个循序渐进的过程不是么？一点一点前进总比原地踏步的好。我们要开始深入技能树了……为了我们的大招。除了上述的行高、行距的概念之外还有下面的几个概念需要理解。
内容区
内容区是指底线和顶线包裹的区域（行内元素display：inline可以通过background-color属性显示出来），实际中不一定看得到，但确实存在。内容区的大小依据font-size的值和字数进行变化。
行内框
行内框（inline box）是一个浏览器渲染模型中的一个概念，不能直接观测到无法显示出来，但是它又是确实存在，它的高度就是行高(line-height)指定的高度。
行框
行框（line box），同行内框类似的概念，行框是指本行的一个虚拟的矩形框，也是浏览器渲染模式中的一个概念。行框高度等于本行内所有元素中行内框最大的值（以行高值最大的行内框为基准，其他行内框采用自己的对齐方式向基准对齐，最终计算行框的高度）。
文本行中的每个元素都会生成一个内容区。这个内容区则会生成一个行内框（inline box），当一行中的所有内容均已生成了行内框，那么接下来在行框的构造中就会考虑这些行内框，行框的高度要足以包含最高行内框的顶端和最低行内框的底端。看文字不是很直观，上一个简略图就能一目了然。
行框和行内框
图片总是能很直观将一些文字概念变的很直观。为啥要叨逼叨介绍这么多概念，是因为这些概念和vertical-align属性的值有莫大的关系。世间万物总是有广泛的联系的，没有无缘无故的恨也没有无缘无故的爱。美女愿意嫁给穷逼，也就意味着穷逼很大几率肯定是帅到了让妹子合不拢腿的地步。
有了这些概念作为支撑，对于我们掌控vertical-align各个值的渲染效果有事半功倍的效果。比如我告诉你background-color:red;的时候你的脑海中肯定会跳出一个红色矩形，这个就是我们对background-color的概念理解太深导致的结果。
目前我们已经点了所有的前置技能点和过路技能点，剩下的就是把大招的技能给点出来了，来继续打几个怪吧，经验条已经80%了，升了级就有技能点点大招了。
vertical-align属性值详解
| 值 | 详解 |
|---|---|
| baseline | 使元素的基线同基准元素（取行高最高的作为基准）的基线对齐 |
| sub | 下标，使元素的基线相对于基准元素的基线降低。移动的幅度由浏览器来决定 |
| super | 上标，使元素的基线相对于基准元素的基线升高。移动的幅度由浏览器来决定 |
| top | 将元素的行内框的顶端与行框的顶端对齐。 |
| text-top | 元素行内框的顶端同文本行的顶线对齐 |
| middle | 通常使用在图片上，将图片的垂直方向的中线与文本行的中线对齐。 |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐。 |
| text-bottom | 元素行内框的底端同文本行的底线对齐 |
| length | 如：2em、10px。允许使用负值。 |
| % | 使用 “line-height” 属性的来计算。允许使用负值。 |
| inherit | 规定应该从父元素继承vertical-align属性的值。 |
两个表大致上是一样的，不过在了解完相关知识概念之后，知识体系就会从第一个表刷新成第二个表，注意加粗的地方。这个过程就是知识的专业化，而且脑海中也会形成比较清晰的模型，这是有莫大好处的。因为这样会让自己的知识调用的时候变得迅捷无比，时间就是金钱我的朋友！
你可能也注意到了我在两个表格中的百分比值一栏都是用红色的字体来标注的，这个是要提醒我们vertical-align属性的值设置百分比是根据哪一个元素的属性来计算的。vertical-align百分比值的结果是根据line-height的值来计算的。
/*line-height值对vertical-align百分比值的影响*/
p{
line-height : 20px;
vertical-align: 5%;
}
/*上下两个是等价的。*/
p{
line-height : 20px;
vertical-align: 1px; /*20px*5%=1px*/
}
vertical-align属性在不同厂商和不同版本的浏览器中渲染出来的结果可能会有差异，这是由于各个浏览器厂商在理解行框和行内框等等概念上存在许差异导致的。这点对于现在那些熟练使用前端框架而不去研究CSS基础知识的人来说压根就不是个事儿。如果想要深入理解CSS的基础知识，这点还需要用不同的浏览器去做实验来体会。
vertical-align和行框有千丝万缕的联系，行内框和行框更是密不可分的闺蜜，而行内框又和line-height这个属性有本质上的渊源。那么根据这个逻辑链的推导vertical-align属性和line-height属性肯定也是有相当猛料存在了。
但是考虑了良久决定还是另外开一篇文章用较大的篇幅来专门说明两者的关系吧，这样也能有足够的文字描述清楚，文字又不会多到让人看了一眼就丧失看下去的勇气。
仔细会看下写过的字，发现废话还真是多啊，基础知识介绍的也不够清晰。而且基础知识篇幅过大，很多东西都是已有的。这个我要努力改正尽量多去写一些“私货”出来。最后来个黑丝妹子放松一下。
(报告完毕！)
网友评论