记：本文可以作为张老师在慕课网上讲解课程的学习笔记
定义
line-height:通过查MDN文档可知
对于块级元素，CSS属性line-height指定了元素内部line-boxes的最小高度。对于非替代行内元素，line-height用于计算line box的高度。对于替代行内元素，如button/input等元素，line-height并没有影响。
查CSS参考手册，line-height表示字体最底端与字体内部顶端之间的距离，应该是不准确的。
张老师说：line-height表示两条基线之间的距离
通过MDN的定义可以知道，内联元素的高度是由line-height决定的，并不是由字体大小决定的。
高度机理
1. 行高line-height具有继承性，影响无处不在。
2. 高度的表现并不在于行高，而是在于内容区域和行间距。
内容区域高度+行间距=行高
内容区域高度只与字体和字号有关系
取值
line-height的取值有四种类型：normal <number> <length> <percentage>
normal取决于user-agent，与font-family有关系。一般情况下都会在reset.css里面重置line-height
<number>无单位数字，实际计算值=number*字体大小，首选方法。
<length>用于计算line box的高度
<percentage>与元素自身的字体大小有关，实际计算值=percentage*元素计算出的字体大小
inherit行高继承，input等元素默认行高值为normal, 通过使用inherit可以让文本框样式的可控性更强
细微差别
line-height=<number>所有可继承元素根据font-size重新计算行高
line-height=<percentage>/<length>当前元素根据font-size计算行高后继承给子元素
line-height与图片的那些事儿
如果消除图片底部间隙的方法：
1. 图片块状化，这样就没有基线对齐
2. 图片设置底线对齐，默认图片和文字是基线对齐baseline
3. 设置足够小的行高使得基线位置上移 line-height: 0;
应用：
1. 小图片，大文字（图片和文字中线对齐）
保留图片的inline特性，设置文字的字体大小及行高，同时设置图片的vertical-align特性来实现某些效果
如img{vertical-align: bottom;}图片和文字保持底部对齐
img{vertical-align: middle；}图片和文字保持中线对齐
2. 大小不固定的图片，多行文字垂直居中
a. 图片的水平居中：
图片外部容器设置 {line-height: <length>; text-align:center; }
img{ vertical-align:middle;} 图片近视居中，细微之处在于，有隐藏的文本，所以偏差与字体和字号有关。
b. 多行文本水平垂直居中
设置外部容器{ line-height, text-align:center;}
内部文本标签需要修改display转换成和图片一样inline-block，同时重置外部继承的text-align和line-height属性值{text-align:left; vertical-align:middle;}
必要时设置max-100%;