BFC就是给一片区域一个排版的规则、基准（左上角在哪儿，右上角在哪儿......）。给block元素的基准就是BFC，给inline元素的基准就是IFC。
font-size
一款字体会定义一个em-square，它是用来盛放字符的容器（如同活字印刷的模具）。em-square通常被设定为宽高均为1000相对单位。一个字有可能会超出模具的宽高，超出em-square的部分叫做出血。font-size就是em-square所相对的尺寸。
每个字母如同在四线格中，字体中x就处于正中间。x的顶部的线叫做X-Height，x底部的线叫做baseline。X-Height上面有一条线叫做Cap Height，大写字母的顶部就是基于这条线。Cap Height上面紧挨着一条线，叫做Ascender，专门放字母上方超出的一点内容。baseline下面还有一条线，叫做Descender，专门放字母下方超出的一点内容。
包裹字体的元素高度由字体的行高决定，字体的行高不由font-size决定，每个字体的设计师都会给出推荐行高。line-height也不能决定元素的高度。
行盒
内联元素与内联元素，默认以baseline对齐。每一行的行盒，是由所有字基线对齐之后得到的高度决定的。
line-height
line-height决定内联元素的真实站位，可用面积（实际使用面积）可能会超过真实站位。当真实站位大于等于font-size时，字体会自动居中。
当一行中的多个内联元素使用不止一个字体时，可能存在几个字体的基线高度不一样。为了基线对齐，基线的差距会加到高度中。
line-height: normal;中的normal值等于字体设计师给的推荐行高。
vertical-align
vertical-align的默认属性是baseline。
vertical-align: top;是实际占用面积的顶部对齐。
vertical-align: middle;用父元素baseline高度加上父元素中X-Height的一半的高度来对齐当前元素的垂直方向的中点。实际位置的居中对齐，如果字体比较奇葩，文字就不是居中对齐，所以尽量不用vertical-align: middle;为好。
图片下面的空隙
img是inline-block元素。即使父容器中只有一个内联元素，这个内联元素同样会与基线对齐，与谁的基线？与一个“隐形”的小写x。baseline下面还有Descender，所以图片下面总会有空隙。这个空隙多大？不确定，不同的字体空隙不同。
使用font-size: 0;可以消除空隙，但是这个方法并不好，因为会导致写的字看不见。可以修改vertical-align的属性值，只要不是baseline都能消除空隙。
两个内联元素非常难控制让它们对齐，使用vertical-align也容易发生不可预见的情况，尽量使用flex。
