在详细的介绍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/