css系列之line-height 與 vertical-align

參考連接： https://www.zhangxinxu.com/wo...

line box

　　

content area

content area是一種圍繞文字看不見的box.content area的大小與font-size的大小相關。

inline box

inline box不會讓內容成塊顯示，而是排成一行。
若是是個光禿禿的文字，則屬於匿名inline box。

line box

在containing box裏，一個一個的inline box組成了line box。

注：line box高度取決於inline box最高元素的高度

line height

注： 若line-height < content area ，則line box要取line-height的值，這也是爲何會重疊的緣由。

line-height屬性取值：

1.%

• 若自身沒有設置line-height，則line-height = 父元素的font-size * %;
• 即爲直接繼承父元素計算後的line-height，與自身的font-size無關。

2.length

• 若自身沒有設置line-height，則line-height = 父元素的line-height， 也與自身的font-size無關。

3.number

• 若自身沒有設置line-height，則line-height = 父元素的line-height。

區別在於：不論繼承與否，line-height = font-size line-height，所以有靈活性。*

4.normal

• 與number同樣，只是瀏覽器不一樣，會有差別，約爲1.2。

5.inherit

• 繼承父元素的line-height

vartical align

適用於：inline / inline-block / table-cell

　　

理解vertical-align最重要的是先要定line box基線（默認值）：

通常狀況下，基線與X底對齊

1. line box有inline box, 則爲最後一個inline box元素的baseline
2. line box沒有inline box, 則爲底margin邊界，即爲盒模型的邊界
3. line box有inline box, 但overflow != visible, 也爲line box有inline box
4. 特殊狀況，若把inline box最高元素的vertical-align設爲middle, 則baseline則爲最高元素的中間線

vertical-align取值：

　　　　
1.top / bottom

• 使元素的top / bottom與line box的top / bottom對齊

2.middle

• 使元素的中點與line box的X-height對齊 （題外話：ex相對長度單位。相對於字符「x」的高度。一般爲字體高度的一半。)

3.text-top / text-bottom

• 使元素盒模型的top / bottom與line box文本元素的top line / bottom line對齊

4.sub / super

• 使元素盒模型的top / bottom與line box 的 sub / sup元素的baseline對齊

5.length

• 使元素上移 、下移length

6.%

• 若爲0，則爲baseline
• vertical-align = line-height * %; (可爲負）

注：若多行文本，兩個inline-box則對齊最後一行的baseline