web.Frontend

Chapter 6. Text Properties

关于line-height的理解
在一行中，inline元素会被渲染成一个inlinebox，它的高度就是font-size的大小（如果不考虑其他比如padding的影响）。line-height是行与行基线之间的最小高度，它和inline box的高度不同，可能比linebox的高度大，也可能比他小。一行中的所有inline元素都是按照基线来对齐的。line-height默认是normal，为font-size的1.2倍。

linebox的构建方式可以参考下图：

继承问题：
line-height的单位em，ex，以及百分比都是按照自身的font-size来算的。
body {font-size: 10px;}
div {line-height: 1.5em;} /* computes to ‘15px’ */
p {font-size: 18px;}

body {font-size: 10px;}
div {line-height: 1.5;} /* 18px*1.5=27px */
p {font-size: 18px;}

这个例子说明如果给line-height指定单位，则浏览器将首先计算line-height的绝对数值，然后这个结果被子元素继承。
而如果给line-height指定数值而不指定单位，则这个数值将作为一个比例值被子元素继承，从而根据它们各自的font-size计算出line-height的绝对数值。

vertical-align这个东西真是诡异，看得我头都大了……
其取值如下
baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit
vertical-align只用于inline元素和replaced元素（比如img和input等）以及表格单元，应用于表格单元时只有这几个值可以被识别：baseline, top, middle 和 bottom
vertical-align不继承。
baseline:让该元素的baseline和父元素的baseline对齐。
sub:让该元素的baseline（对于replaced元素则是底部）低于linebox的baseline。
super:让该元素的baseline（对于replaced元素则是底部）高于linebox的baseline。
bottom:让该元素的inlinebox底部和linebox的底部对齐。
text-bottom:让该元素的inlinebox底部和默认textbox的底部对齐，对于默认textbox比较难以理解，它的大小是从父元素的font-size中计算来的。
top和text-top类似
middle:让该元素box的中线对齐父元素的的baseline之上0.5ex的那条线，不过要当心不同浏览器对ex的计算方法不同。
如果取百分数，则将该元素的baseline（对于replaced元素则是底部）相对于父元素的baseline上移或者下移其自身line-height的该百分比率。正值上移，负值下移。
如果取一个具体数值（有单位），则将该元素从它没有应用align时候的位置上移或下移相应的距离，同样是正值上移，负值下移。
vertical-align会影响所在linebox的高度，这是显而易见的。

关于bottom和top的相关对齐方式IE和FF似乎有着不同的理解，个人认为IE理解地更合理也更符合标准一些。不过标准中对于linebox的baseline没有明确的定义，所以细究起来也说不清谁对谁错。总之垂直对齐这个属性还值得好好研究，不同大小的inline元素连成一排或者多排，各自应用不同的垂直对齐方式，究竟应该出现什么样的情况？在不同浏览器中的实际情况又如何？待试验。个人觉得今后实际使用中还是多用绝对数值定位比较方便也比较容易控制。