line-height
1. 替换元素vs非替换元素
先讲个题外话，理解一下替换元素和非替换元素.
替换元素：浏览器根据元素的标签和属性来判断标签内容，内容的展现不由CSS控制，这类元素是一类外观渲染独立于CSS的外部对象。
例如:<input type="text">和<input type="checkbox">虽然都是input标签，但是显示的内容是明显不一样的；更多的替换元素有：<img>、<textarea>、<select>、<object>
非替换元素：除了替换元素，剩下的就都是非替换元素了。非替换元素可以直接将内容告诉浏览器。
替代行内元素的display=inline-block;
非替代行内元素的display=inline;
2. 关于line-height的各种概念
行高
相邻两行文字的基线之间的距离。
- 对于块级元素，line-height指定了元素内部line-boxes的最小高度；
- 对于非替代行内元素，line-height用来计算inline box的高度。
其实上面两条内容都可以总结为，line-height决定了替代行内元素的高度。
行距
行高和字体尺寸的差值称为行距（leading），leading=(line-height)-(font-size)
行高行距示意图
内容区域
内容区域由字体大小决定
内容区域
inline-box
行内框（inline-box）是包裹行内元素的模型。正常情况行内框等于内容，设置行高可以增加行内框的高度，但是背景色只填充内容不填充整个行内框。
inline-box
line-box
行框（line-box）是包裹一行元素的模型。一行元素中可能包含行高不一样的各种元素，行框高度取决于其中的最大行高。
当有多行内容是，每一行都有自己的行框。
行框和行内框
如上图，行框的高度是“若愚”的行高。
3.line-height语法
line-height可以使用的值
line-height:normal; 默认值一般是1~1.2之间
line-height:150%; 是字体大小的1.5倍，继承计算过的实际px值
line-height:10px; 固定行高
line-height:1.5; 是字体大小的1.5倍，直接继承1.5
line-height:1.5em; 是字体大小的1.5倍，继承计算过的实际px值
缩写
line-height可以和font-size缩写在font属性中，如：
font:100px/1.5 ""; 表示字体大小100px,行距1.5倍。后面的双引号一定要有，不管加不加字体名
4.行高的计算与继承
计算
-
以em、ex和%为单位的行高，其参考对象是元素本身的font-size。
都是2em
-
行高可以设置的比字体小，此时多行文字会叠加到一起。
文字叠在一起
继承
p { font-size :20px; line-height : 2em; }
p span { font-size : 30px; }
<p>标签中字高20px，行高设置2em，计算得行高为40px，子标签<span>继承的行高就是40px。用%做单位时，也是这样的效果。
Paste_Image.png
这样继承的问题是：当父元素和子元素中字体大小不一样时，可能会出现文字重叠的情况，如下图。
p { font-size :20px; line-height : 1em; }
p span { font-size : 30px; }
文字重叠
解决这种问题的方法是：
- 分别设置行高（比较麻烦）；
- 使用纯数字倍数形式来设置行高，这种倍数是可以被继承的.
p { font-size :20px; line-height : 1; }
p span { font-size : 30px; }
纯数字可以被继承
