css 行高
文本四线，从上到下分别是顶线，中线，基线，底线。
1. 行高：是指上下文本行的基线见的垂直距离，即途中两条红线间的垂直距离。（途中上下两条同色线间的垂直距离）
2. 行距：是指一行底线到下一行顶线的垂直距离。
3.半行距：行距的一半
1.内容区：
文本行中的每一个元素都会生成一个内容区，这个由字体的大小确定,但高度并不是字体大小，内容区比字体大小大。这个内容区则会生成一个行内框。
如果不存在其他因素，这个行内框就完全等于该元素的内容区。由line-height产生的行间距就是影响行内框高度的因素之一
2.行内框：行内框是一个浏览器渲染模型中的一个概念。无法显示出来。行内框默认等于内容区域。将line-height的计算值减去font-size的计算值，就是总行距。这个值可能是负值，任何将行间距/2 分别应用到内容区的顶部和底部，其结果就是该元素的行内框
3.行框：行框是指本行的一个虚拟的矩形框。是浏览器渲染模式中的一个概念，并没有实际显示。默认情况下行框高度等于本行内所有元素中行内框最大的值（一行上垂直对齐时以行高值最大的行内框为基准，其他行内框采用自己的对齐方式向基准对齐，最终计算行框的高度）。当有多行内容时，每行都会有自己的行框。
结论：感觉上面的概念不太符合实际情况。
个人总结
1.内容区大小由字体大小决定，但大于字体大小。默认情况下，行框就等于内容区的高度和位置,
2.如果指定了行高，如果行高大于字体大小，那么行框高度就等于行高高度，字体和行框中间对齐
如果行高小于字体大小，那么行框高度会缩小，但不会等于行高，行框也不会和字体中间对齐。
所以设置行高时，尽量让行高大于字体 大小。
3.行框的高度决定父元素的高度（父元素未设置高度时）
4.行高是可以被继承的。只有因子值会被子元素继承换算前的因子，其他会继承换算后的像素
行高最常用的功能：单行文本垂直居中（设置行高为元素高度）
实例
<body >
<div id="d1">
<span id="s1">中文English</span>
</div>
</body>
css代码1，未指定行高
#d1 { background: pink; width:300px; margin:100px auto; } #s1 { background: deeppink; font-size: 40px; /* line-height: 80px; */ }
css代码2， 行高大于字体大小
#d1 { background: pink; width:300px; margin:100px auto; } #s1 { background: deeppink; font-size: 40px; line-height: 80px; }
css代码3，行高小于字体大小(或许行框底部与底线对齐？)
#d1 { background: pink; width:300px; margin:100px auto; } #s1 { background: deeppink; font-size: 40px; line-height: 20px; }
