關於vertical-align和line-height的真知灼見
本文的重點是了解vertical-align和line-height的使用
涉及到的名詞：基線，底端，行內框，行框，行間距，替換元素及非替換元素，對齊。只有充分理解這些概念才會靈活運用這兩個屬性。
什麽是對齊
對齊一定是涉及兩個對象：對齊元素以及要對齊的對象；比如在軍訓時教官喊稍息，我們每個人都會有一個參照的標準去站齊。
而行內元素的對齊，除了行內元素本身，還有一個參考系，這個參考系就是行框的基線，而行框的基線依據於行內框元素的基線位置。
什麽是基線
每一個文本元素自身都會有四條線，頂線，中線，基線，底線。而基線一般是指文本元素中以x字母為準，x字母的下邊緣為該文本元素的基線。
而行高則是兩個文本行基線之間的距離，往往使段落產生間距。
但是也可以這樣理解，行高 = 字體大小 + 上半行距 + 下半行距（其中上下半行距相等，這個等式可以從圖中推導出來）
每一個文本元素和文本行元素，都會有一條基線，基線的位置受到文本的字體格式以及line-height的影響。
line-heght的應用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{
display: inline-block;
height: 60px;
width: 60px;
background-color: grey;
text-align: center;
/*line-height: 60px;*/
line-height: 30px;
color: rebeccapurple;
font-size: 20px;
word-break: break-all;
}
</style>
</head>
<body>
<span>++++++++</span>
</body>
</html>
什麽是行框和行內框
<p> <span>span</span> text <em>em</em> <i>yuan</i> </p>
在每一個段落行內，不同的行內元素除了包裹自身內容的內容框之外，還會自動生成一個行內框，其中沒有標簽包裹的文本會生成匿名行內框，不同的行內框會根據各自不同的line-height產生行間距，而行框則會剛好包括最高的頂端和最低的底端，從而來生成行框。
span{
display: inline-block;
width: 50px;
line-height: 80px;
background-color: darkcyan;
font-size: 20px;
}
em{
display: inline-block;
width: 50px;
line-height: 50px;
background-color: rebeccapurple;
}
i{
display: inline-block;
width: 50px;
line-height: 30px;
background-color: green;
}
什麽是替換元素
替換元素是指元素的內容本身並非文檔直接表現的，換句話說，就是不同的頁面中，瀏覽器不能確定其具體內容的元素，比如圖片，按鈕，因為圖片的內容取決於圖片引用的src屬性源，按鈕的類型則依據於其input類型，因此瀏覽器是不能確定今天img元素裏面是一張美女圖片，那麽明天加載的頁面裏面img是不是一張美女圖片。
除了替換元素，其他的元素就是非替換元素。非替換元素和替換元素在行框中的影響，主要是其高度計算方式，替換元素在行框中的位置是由其height，padding和border來決定，而非替換元素在行框中的位置則是其line-height和字體樣式。
如果只有文本元素的話，那麽行框是很好計算基線位置的，但是如果有圖片按鈕等替換元素的話，那麽計算方式就會變的稍微復雜一些。
在css中，有兩種高度方式，一種是height，一種是line-height，這兩種會決定元素的高度和位置，對於圖片等行內替換元素來說，height是行框計算的依據，line-height對圖片、按鈕不會產生影響。
因此，如果有圖片在行內的話，那麽圖片的底端會對齊文本的基線。
關於vertical-align和line-height的真知灼見