line-height
- 對(duì)于文本行：
在沒(méi)有l(wèi)ine-height時(shí)，行內(nèi)框=內(nèi)容區(qū)=font-size- 在不設(shè)置line-height時(shí)，取默認(rèn)值normal，目前測(cè)試的值為font-size的1.3倍，即 行內(nèi)框=內(nèi)容區(qū)=font-size*1.3
- 在設(shè)置line-height后，行內(nèi)框高度=line-height ， 行間距=line-height （-） font-size ， 內(nèi)容區(qū)=font-size
- 行框的高度恰好足以包含最高行內(nèi)框的頂端和最低行內(nèi)框的底端
1、使用百分比和em，行高僅計(jì)算一次，子元素繼承計(jì)算結(jié)果。
2、使用數(shù)字表示倍數(shù)，行高是針對(duì)父元素和每個(gè)子元素的font-size分別計(jì)算
【注，以上計(jì)算的基準(zhǔn)都是font-size】
題外話，font-weight會(huì)影響字體的寬度，但是不會(huì)影響高度
vertical-align
- 只適用于內(nèi)聯(lián)元素和table-cell元素，且無(wú)繼承性
取值：
baseline:當(dāng)前元素的基線 —— 父元素的基線
sub\super：當(dāng)前元素的基線 —— 父元素基線 升高或降低一定位置
bottom: 行內(nèi)框的底端 —— 行框的底端
text-bottom:文本元素底端(或者說(shuō)行內(nèi)框的底端) —— 文本底端（即父元素內(nèi)容區(qū)底端）【替換元素或其他非文本元素會(huì)忽略這個(gè)屬性】
top\text-top:類(lèi)似
middle:常用于圖片，將行內(nèi)框的垂直中點(diǎn)與父元素基線上方0.5ex處的一個(gè)點(diǎn)對(duì)齊
設(shè)置為百分?jǐn)?shù)時(shí)，乘以該元素的line-height，使該元素的baseline相對(duì)于父元素的baseline提升或下降一定量
也可以直接設(shè)置為具體長(zhǎng)度，如:5px
替換元素沒(méi)有自己的基線，一般是將其行內(nèi)框的底端與父元素的基線對(duì)齊，而替換元素的內(nèi)邊距、邊框、外邊距都會(huì)使它的行內(nèi)框增大
- 下面展示一下line-height和vertical-align的關(guān)系：
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
