IFC(inline formatting content)內(nèi)聯(lián)格式化上下文，也是BFC的兄弟。
詳情鏈接:深入理解 CSS：字體度量、line-height 和 vertical-align
font-size是什么
-
font-size:100px
不是指里面字的大小，也不是字的高度
-
活體印刷
font-size是指那個模具的高度，也就是活體印刷塊的高度
所以有的字體是可以比font-size大的
-
fontsize就是em-square
每一個字體的英文字符都要定義很多東西。
如果字體里面的部分相對于em-square超出的話，就叫出血(bleed outside)
line-height是(規(guī)定了)什么
每個字體都有一個默認(rèn)的，字體設(shè)計師推薦的行高，設(shè)計師可以隨意添加
-
line-height的意義
- 讓里面的字體自動居中顯示
- line-height決定一個內(nèi)聯(lián)元素的真實占位(真實占行高度)
-
內(nèi)聯(lián)元素對齊方式
內(nèi)聯(lián)元素是默認(rèn)用基線(Baseline)對齊的，因為這樣好看
-
多個font-size高度問題
- 字體不一樣，基線也不一樣
- 當(dāng)兩個inline元素的字體不一樣時，會使他們的父元素變高
因為兩個字體基線不一樣，而一行又是已基線對齊的，所以會多幾像素
vertical-align屬性(少用)
-
vertical-align:top
所謂的top就是把字體的實際占地高度與父級元素默認(rèn)字體的頂端對齊
所以大部分情況這個元素沒用
-
vertical-align:middle
不是居中對齊，也沒用
圖片下面為什么有空隙
-
原因
<img>也是inline元素，它會與看不見的基線對齊
-
解決
- vertical-align: top
- img{display: block;}
- font-size: 0 傻逼采用
其他
-
inline-block 元素對不齊
幾乎無解，不過可以使用display:flex或使用float解決
-
inline-block 有空隙
可以使用display:flex或使用float解決
