在詳細的介紹line box之前，我們先來了解兩個概念：替換元素和非替換元素。
替換元素
替換元素是浏覽器根據其标簽的元素與屬性來判斷顯示具體的内容。
比如：
<input type="text" />
，這是一個文本輸入框，當type是其他值的時候，浏覽器顯示就不一樣
(X)HTML中的
<img>
、
<input>
、
<textarea>
、
<select>
、
<object>
都是替換元素，這些元素都沒有實際的内容。
非替換元素
(X)HTML 的大多數元素是不可替換元素，他們将内容直接告訴浏覽器，将其顯示出來。
比如
<p>我是貓貓</p>
浏覽器将把這段内容直接顯示出來。
line box
為了讓我們能夠更加深入的了解line box，我将按照從大到小的順序來介紹其相關内容。
他們的包含關系大緻如下:
containing boxline boxesline boxinline boxesinline box
- containing box由多個line box組成。堆疊line boxes的高度就是containing box的高度
- 每一行内容就是一條line box。
- line box由該行的多個inline box組成
- inline box包含很多内容，包括em框、内容區、行間距、行内框、行框等等。
那麼，我們從最小的部分開始講起。
em框（character box）
這裡指的是字元字形。
通過font-size的值可以确定em框的高度。
内容區（context area）
css假設每個元素都會生成一個或者多個Box，稱為元素框，元素框中心有内容區。
内容區對于非替換元素和替換元素有不同的解釋。
簡單來說就是
非替換元素：寬度自适應，高度由em框決定替換元素：元素固有寬高（或是通過css設定的寬高）+可能存在的外邊距、邊框、内邊距。
行間距、行内框、行框、基線
行間距
行間距是由值和font-size
line-height
值之差決定的。
這個值實際上要分成兩半，一半在上，一半在下。是以也可以稱之為半間距（half-leading）。
需要注意的是行間距隻應用于非替換元素。
行内框
這個框通過向内容區增加行間距來描述
對于非替換元素和替換元素的高度，行内框有不同的解釋
非替換元素：行内框高度=替換元素：行内框高度=内容區高度line-height
行框
包含該行中出現的行内框最高點和最低點的最小框
單純的文字描述，很難讓人了解。不過通過圖的話，我們就可以更直覺地了解這幾個概念。
非替換元素：
基線
不同元素的基線位置不同，整個行框會有一個基線，行内元素的位置是基于兩者基線對齊
inline box
inline box是我們平時所說的具有inline屬性的标簽（span、b、a、i等等）
如果是個光秃秃的文字，則屬于匿名inline box。
對于非替換元素而言，inline box的高度隻于
font-size
和
line-height
這兩個屬性有關。前者是決定是em框的高度，後者決定的是行高。
vertical-align和line-height
vertical-align是與基線有關的一個屬性，它隻作用于屬性為inline或inline-block（table-cell也可以了解為inline-block水準）的元素。
該屬性定義行内元素的基線相對于該元素所在行的基線的垂直對齊
允許指定負長度值和百分比值。這會使元素降低而不是升高。
在表單元格中，這個屬性會設定單元格框中的單元格内容的對齊方式。
<p>
這是一幅
<img style="border:0;vertical-align:text-top" src="test/eg_cute.gif" />位于段落中的圖像。
</p>
<p>
這是一幅
<img style="border:0;vertical-align:text-bottom" src="test/eg_cute.gif" />位于段落中的圖像。
</p>
line-height 屬性用于設定行間的距離（俗稱行高），既可以作用于塊級元素，也可以作用于inline box。
該屬性會影響行框的布局。
在應用到一個塊級元素時，它定義了該元素中基線之間的最小距離而不是最大距離。
上述的解釋可能會讓大家誤解，是以我再多說兩句：
1.對于塊級元素，line-height并不能代替height。塊級元素的高度是由塊級盒子（block-box）決定的，line-height并不能改變其高度。
如果塊級元素内部為空，則line-height屬性則不會生效。
例如：
<div style="width:100px;line-height:100px"></div>
//這樣的元素高度為0,是以不會顯示内容。
2.對于塊級元素，line-height作用的是其中的inline box。如果沒有設定高度的話，塊級元素的高度由最高的inline box撐起。
例如：
<div style="line-height:100px">我是貓貓！</div>
//這時元素的高度為100px。
line box
每一行就是一個line box，每個line box都由inline box組成。line box的許多特性與inline box相關。
特性1：
當inline box寬度大于父類容器時，會被拆分成多個inline box，進而生成多個line box。
父類容器寬度足夠：
父類容器寬度不足：
特性2：
line box的高度取決于該行中元素的最高高度。
這個元素可以是line-height（行級盒子模型）決定也可以是由height（塊級盒子模型），這隻取決于哪個更高而已。
總結
為了友善記憶與了解，我專門做了一份腦圖。
由于CSDN設定了最大的圖檔的寬度（max-width: 602px），看不清楚，是以我把位址貼出了：
https://img-blog.csdn.net/20170828203817435?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbWFvbWFvbGFvc2hp/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
補充：
雖然單個字型字元的寬度隻受font-size影響，但是高度卻還會受font-family屬性和浏覽器的影響。（效果甚微）
font-family
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>單個字元字型的寬度</title>
<style>
* {
margin: ;
border: none;
padding: ;
}
.fh{
font-family: "SimHei", "黑體", "sans-serif ";
}
.fw{
font-family: "Microsoft YaHei", "微軟雅黑", "sans-serif ";
}
.fk{
font-family: "KaiTi", "楷體", "sans-serif ";
}
.fs{
font-family: "SimSun", "宋體", "sans-serif ";
}
div {
margin: px auto;
text-align: center;
}
div span{
line-height: ;
}
</style>
</head>
<body>
<div class="fh">
<span>田</span>
</div>
<div class="fw">
<span>田</span>
</div>
<div class="fk">
<span>田</span>
</div>
<div class="fs">
<span>田</span>
</div>
</body>
</html>
黑體
寬x高：16x18
微軟黑體
寬x高：16x22
楷體
寬x高：16x17
宋體
寬x高：16x18
浏覽器
Firefox浏覽器-黑體-1em大小（預設大小）：
寬x高：16x18
chrome浏覽器-黑體-1em大小（預設大小）：
寬x高：16x16
參考文檔：
《CSS 權威指南 第3版》
http://www.cnblogs.com/fsjohnhuang/p/5259121.html
https://segmentfault.com/a/1190000005155084#articleHeader10
http://www.zhangxinxu.com/wordpress/2010/05/我對css-vertical-align的一些了解與認識（一）/
http://www.zhangxinxu.com/wordpress/2009/11/css行高line-height的一些深入了解及應用/
http://www.zhangxinxu.com/wordpress/2010/11/%E6%8B%9C%E6%8B%9C%E4%BA%86%E6%B5%AE%E5%8A%A8%E5%B8%83%E5%B1%80-%E5%9F%BA%E4%BA%8Edisplayinline-block%E7%9A%84%E5%88%97%E8%A1%A8%E5%B8%83%E5%B1%80/