作者：新野时间：2018-04-2809:23第一步：内联盒模型。为什么明明说了垂直对齐，一开始却是盒模型，或者说是内联盒模型，因为垂直对齐控制的对象就是这个模型，所以先了解下控制环境，再看如何控制它。关于盒模型相关的东西，我们会单独说明，因为很重要，这里只是简单说明一下，包括下面的行高：-尺寸。内联框（inlineboxes）：不容易表达。让我用一个例子来解释。内联横向标签（em、a、span等）所包含的称为“内联框”，如果是裸文本，则称为“匿名内联框”。linkbox”。lineboxes（线盒）：一行就是一个linebox，由inlineboxes组成，应该不会太难理解。containingbox：由一行lineboxes盒子组成，比如“
simpletextenclosedinlinehorizo??ntaltags
”。内联盒模型的布局有问题，我提一下：在使用display:inline-block让元素在一条线上时，由于换行等一些空白字符导致元素之间出现空隙（解决方法是将font-size设置为shell:0px，里面的小格子将font-size恢复到需要的值，当然还有其他方法，比如标签全部在一行，不换行，不过感觉这个比较有用）。还有一个trick，对于想要整体居中，内部左对齐的布局，顺序当最后一行少于一行时不要突然居中，可以添加几行与内容元素一样宽的行内元素高度为零。这非常有用。另外还有几个常用的属性，一一列举：white-space：属性设置元素中的空白如何处理，比如是否换行等。第二步：行高。为什么要提前说明行高，因为垂直对齐是在一行中进行的，行高代表的是实际高度。有必要了解它以帮助找到对齐线。行高定义了两行文本基线（baseline）之间的距离（不一定准确，更严格的说，应该是行框的实际高度，而不是height），内容区域（contentarea）高度+行spacing(垂直间距)=行高，由于继承，行高无处不在，包括单行文字；其次，高度的表现不是行高，而是内容区高度+行间距，内容区高度只与字号和字体有关，行高无关。简单来说：行高决定行内框的高度，行距可大可小，可正可负，始终保证行高等于高度。内容区域的高度不一定是font-size，还要看字体。不同的字体不一样，但是simsum下两者是一样的。当line-height的值为数字时，都可以继承并根据font-size重新计算。当取值为100%和em时，根据font-size计算当前元素，然后将计算结果继承给后面的元素。区别有点大。替换元素是特殊的。通常，它们具有内部尺寸和纵横比。它们不容易被理解。遇到他们时要小心。我们稍后会讨论这个元素。第三步：文字。verticalalignment用于设置垂直对齐方式。所有垂直对齐的元素都会影响行高。修改的是父元素的哪一行与父元素的那一行垂直对齐。例如，默认的基线与父元素的基线对齐；如果值为百分之一百，则计算是相对于行高计算的。根据前置知识，你应该能猜到它是一个inline-block，table-cell（比如一个td元素）或者一个inlinedependentelement。如果设置为数字、百分比或em，则表示与默认对齐方式的偏移量。第四步：注意。inline-block的baseline是正常流中最后一个linebox的baseline，除非这个linebox里面没有linebox或者自己overflow属性的计算值不是visible，这种情况baseline是边距的底部边缘。