一、想死你们了
几个星期没有写文章了，好忙好痒；个把月没有写长篇了，好忙好想；半个季度没在文章中唠嗑了，好痒好想。
后面一栋楼有对夫妻在吵架，声音雄浑有力，交锋酣畅淋漓，还以为只有小乡镇才有这架势，哦，突然想起来，我就是住在上海郊外的小乡镇上。
刚刚买了几十股京东的股票，第一次玩这个，看好京东的发展。其实股价21的时候就打算入手了，但是，转外汇的时候，提示，要工作时间。然后一忙二忘，等现在入的时候，已经涨了20%多了，科科，肥皂弄人啊！写到这里的时候，忍不住拿出手机一看，哎呦，不错哦，盈利28刀，孩子的半罐奶粉钱有了，哈哈！
说起肥皂，让我想起了《监狱学院》，科科~
原来，肥皂和基友的传说已经传播到了11区。岂止啊，除了2次元，代码次元也深受其爱，比方说CSS届的vertical-align和line-height就是典型的表面上看上去大相径庭，实际上是大进后庭的断背好基友啊！
没错，就是这么狗血！
乡下人不打诳语，下面我就好好跟大家八卦下，vertical-align和line-height之间令人发指的基友关系！
二、表现明显的断背基情
众所周知，vertical-align支持很多属性值，足足可以组成一个足球队了：
/* 关键字值 */vertical-align: baseline;vertical-align: sub;vertical-align: super;vertical-align: text-top;vertical-align: text-bottom;vertical-align: middle;vertical-align: top;vertical-align: bottom;/* 值 */vertical-align: 10em;vertical-align: 4px;/* 值 */vertical-align: 10%;/* 全局值 */vertical-align: inherit;vertical-align: initial;vertical-align: unset;
其中，有个属性值暴露了vertical-align和line-height之间的基友关系，大家猜猜看是哪个属性值？
哇塞，好厉害！居然被大家一眼就看出来了，没错，就是“百分比值”。
vertical-align的百分比值不是相对于字体大小或者其他什么属性计算的，而是相对于line-height计算的。举个简单的例子，如下CSS代码：
{ line-height: 30px; vertical-align: -10%;} 实际上，等同于：
{ line-height: 30px; vertical-align: -3px; /* = 30px * -10% */ } CSS属性何其多，偏偏跟line-height有一腿，这不是有基情那是什么？
//zxx: IE6/IE7浏览器下的vertical-align的百分比值不支持小数line-height
三、背地里无处不在的基友关系
//zxx: 注意 ，vertical-align和line-height的地下基友关系从HTML5文档声明开始的，因此，以下探讨的现象，都是在页面为HTML5声明前提下，类似下面的doctype:
另外，下面很多效果直接就是真实演示，因此，请使用现代浏览器观摩下面的内容。如果发现某些行为与描述不匹配，且浏览器正常，那可能是因为你访问的并不是 原出处 。
① 基本现象要八卦vertical-align和line-height之间的关系，我们不妨从一个极其简单的现象入手。假设，我们有一个
标签，然后，里面有一张 图片，我们的HTML代码就是这样子：
查看更多关于CSS深入理解vertical-align和line-height的基友关系_html/css_WE的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did115129