某天看了《CSS世界》，作者的一段话鞭打着我的灵魂。原文是这样的——》说到这里，忍不住多说几句，很多从业多年的前端开发者可能不知道vertical-align的属性值是支持数值的，更别提支持负值了，这着实让我吃惊。”...羞耻，满脸羞耻！我就是那种前端开发者~所以我有意识地关闭了小黑屋，搞了一天的工作，努力加深对vertical-align和vertical-align的理解后写了这篇文章分享给大家！在写vertical-align样式的时候，自动匹配了一长串属性值，看得我眼花缭乱，为什么会有那么多属性值，我该用哪个？为什么这个属性值表示的一样form作为另一个属性值？关于vertical-align的属性值的详细统计，代码可以参考code1-1，表达式form可以参考image1-1。code1-1的编译结果如图下图中：vertical-align:middle;//middle表示元素的中点在基线加上父元素x字母的一半。4px，middle表示元素的中点在基线加上父元素x字母的一半，8px/2-32px/2=-12px。编译code2-1的结果如下：vertical-align:50%;//百分比值参考图片大小为32px32px【当前图片为300px300px，统一样式img{width:32px;}】，字体大小为chrome默认字体大小为16px。只显示文字时，行高为22px。图片默认设置vertical-align:50%。既然是百分比，那肯定是有参考系的。以谁为参考系有以下三个假设：假设1.如果以图片的高度为参考系，则图片向上偏移32px*50%=16px；假设2，如果以font-size为参考系，图片会向上偏移16px*50%=8px；假设3，如果以line-height为参考系，图片会向上偏移22px*50%=11px；这不是什么秘密，当vertical-align设置为百分比时，它的参考系统是line-height，所以我将列出两个设置了line-height的内联元素来进行比较。code2-2编译结果如下：vertical-align:top;和垂直对齐：文本顶部；对比一下，两个例子中的bottom和text-bottom也是一样的whereline-height:10px;已设置。可以看出，top与父盒模型的上边缘对齐，text-top与父元素内容的上边缘对齐。code2-3-1的编译结果如下：code2-3-2的编译结果如下：水平位置vertical-align:top;vertical-align:middle;vertical-align:baseline;vertical-align:bottom;从top开始的水平位置下面的属性值是：top/middle/baseline/bottom这句话的意思是把top/middle/baseline/bottom当成一条水平线，设置vertical-align元素对齐这个horizo??ntalline,frombottom从图中可以看出，这条水平线的位置从上到下依次为top/middle/baseline/bottom。code2-4-1的编译结果如下图所示：本文主要介绍了vertical-align的属性，下面是完整的源码。建议大家在浏览器中操作，查看编译结果，加深理解。-第一集过期敬请期待第二集和第二集
