line-height
- 对于文本行：
在没有line-height时，行内框=内容区=font-size- 在不设置line-height时，取默认值normal，目前测试的值为font-size的1.3倍，即 行内框=内容区=font-size*1.3
- 在设置line-height后，行内框高度=line-height ， 行间距=line-height （-） font-size ， 内容区=font-size
- 行框的高度恰好足以包含最高行内框的顶端和最低行内框的底端
1、使用百分比和em，行高仅计算一次，子元素继承计算结果。
2、使用数字表示倍数，行高是针对父元素和每个子元素的font-size分别计算
【注，以上计算的基准都是font-size】
题外话，font-weight会影响字体的宽度，但是不会影响高度
vertical-align
- 只适用于内联元素和table-cell元素，且无继承性
取值：
baseline:当前元素的基线 —— 父元素的基线
sub\super：当前元素的基线 —— 父元素基线 升高或降低一定位置
bottom: 行内框的底端 —— 行框的底端
text-bottom:文本元素底端(或者说行内框的底端) —— 文本底端（即父元素内容区底端）【替换元素或其他非文本元素会忽略这个属性】
top\text-top:类似
middle:常用于图片，将行内框的垂直中点与父元素基线上方0.5ex处的一个点对齐
设置为百分数时，乘以该元素的line-height，使该元素的baseline相对于父元素的baseline提升或下降一定量
也可以直接设置为具体长度，如:5px
替换元素没有自己的基线，一般是将其行内框的底端与父元素的基线对齐，而替换元素的内边距、边框、外边距都会使它的行内框增大
- 下面展示一下line-height和vertical-align的关系：
Paste_Image.png
Paste_Image.png
Paste_Image.png
Paste_Image.png
Paste_Image.png
Paste_Image.png
Paste_Image.png
Paste_Image.png
Paste_Image.png
Paste_Image.png
Paste_Image.png
baseline:
bottom:
Paste_Image.png
middle:
Paste_Image.png
top:
Paste_Image.png
