參考線：
font-size、line-height、font-family、vertical-align
文字-字體：
文字是由軟件制作的，比如font-forge，每種字體的參考線都不一樣
字體參考線：
font-size：
我們設置的字體大小，設置的是相對大小，並不是實際大小，
文字默認的相對大小為：1000、1024、2048；就相當與一個框，font-size設置的是框的大小，每個字體不相同。
文字頂線到底線的距離，是文字的實際大小（content-area，內容區）；此區域不可以設置大小，
行盒的背景覆蓋content-area區域：
例如當設置font-size為，200px時， 2398/2048 = X/200 ,,
默認：框的大小 ：2048 字體大小 ：2396
font-size=200px時：框的大小：200px ,字體大小 ：X = 233px，
結果背景會大於設置的200px，用span元素包裹看得更清晰。
line-height:
行高：是指頂線向上延伸的空間和向下延伸的空間，向上向下相等，該空間為gap（空隙）；
gap默認由設計字體者決定
top到bottom 叫做virtual-area(虛擬區);此區域可以設置大小，
line-height設置的即為 虛擬區的高度；
line-height：取值
normal;默認值 使用字體的gap
測試：
結構：{
<p>
<span>M</span>
</p>
}
樣式：{
p{
background-color: red;
}
span{
font-family: consolas;
font-size: 200px;
background-color: rosybrown;
line-height: 1;
}
}
可以看出，行盒覆蓋的時內容區，而塊盒覆蓋虛擬區；這就解釋了為什么 塊盒中設置 line-height 為height可以垂直居中；
vertical-align：
font-size 、font-family、line-height 三個確定了參考線’
只要一個元素，包含行盒，那么此元素就會有自己的參考線。
默認情況下：基線對齊，
vertical-align：取值
baseline：該元素的基線與父元素的基線對齊。 自己對齊父元素
super：該元素與父元素上基線對齊。 自己對齊父元素
sub:該元素與父元素的下基線對齊。 自己對齊父元素
text-top：該元素的虛擬區的頂邊，對齊父元素的頂邊（text-top） 父元素對齊自己，故使父元素的基線發生變化，會影響其他元素；
text-bottom：該元素的虛擬區的頂邊，對齊父元素的頂邊（text-top）父元素對齊自己，故使父元素的基線發生變化，會影響其他元素
top:該元素的虛擬區的頂邊，對齊父元素的頂邊（line-box）；
middle：該元素的中線（content-area中間），與父元素的X字母的高度的一般對齊
bottom:該元素的虛擬區的底邊，對齊父元素的底邊（line-box）；
數值：相對於父元素基線的偏移量，
百分比：相對於自身的虛擬區的高度；
行盒組合起來，可形成多行，每一行區域叫做line-box，line-box的頂邊，是此行中最高，底邊為最低。
實際上，高度自動時，高度為line-box的疊加。
line-box（行框）：是承載文字的必要條件；一下情況不生成行框
1，元素內部沒有任何行盒
2，元素字體為0；
可替換元素和行塊盒的基線；
圖片：基線在下外邊距
表單元素：基線在內容底邊位置
行塊盒：
1、行快和最后一行由line-box，用最后一行的基線作為整個行塊盒的基線
2、如果內部沒有行盒，則使用圖片的的方式，作為基線