第一节 line-heigth的定义
line-height的定义
line-height 行高，
两行文字基线之间的距离
1.什么是基线 baseline,x最上面和最下面的距离
2.为何是基线 基线是*（所有线）的基础
3.需要俩行吗 两行的定义已经决定了一行的表现
baseline与字体，不同的字体和基线是有关的。
line-height:200px 与baseline
第一行文字的基线与第二行文字的基线就是行高
为何line-height可以让单行文本居中
第二节：line-height与行内框盒子模型
行内框盒子模型-css进阶必备知识
所有内联元素的样式表现都与行内框盒子模型有关！例如浮动的图文环绕效果
行内框盒子模型
<p>这是一行普通的文字，这里有个<em>em</em>标签。</p>
包含四种盒子
1.内容区域（content area）是一种围绕文字看不见的盒子，内容区域大小与font-size大小相关
2.内联盒子（inline-boxes）内联盒子不会让内容成块显示，而是排成一行，如果外部含inline水平的标签
span a em 等，则属于内联盒子，如果是个光秃秃的文字，则属于匿名内联盒子
3.行框盒子模型
行框盒子 line boxes 每一行就是一个行框盒子，每个行框盒子又是有一个一个内联盒子 inline box组成
4.<p>标签所在的包含盒子containing box此盒子由一行一行的行框盒子 line boxes组成
所以说行内框盒子模型共有四种
1.内容区域content area
2.内联盒子inline boxes
3.行框盒子line boxes
4.包含盒子 containing box
第三节：line-height的高度机理 深入理解内联元素的高度表现
文本占据的高度
例如<p>这是一行普通的文字，这里有个<em>em</em>标签。</p>
document.querySelector("p").clientHeight
获取p标签的高度。
元素的高度从何而来，是由里面的文字撑开的？答案 不是
p元素的高度是由line-height决定的。
.test1{font-size:36px;line-height:0;border:1px solid #ccc;}
.test2{font-size:0px;line-height:36px;border:1px solid #ccc;}
结果：test2的高度还在。
内联元素的高度是由行高决定的。
问题：line-height命名是俩基线距离，单行文字哪来行高，还控制了高度
前提：1.行高由于其继承性，影响无处不在，即使单行文本也不例外。
2.行高只是幕后黑手，高度的表现不是行高，而是内容区域和行间距
内容区域高度（content area） + 行间距（vertical spacing） = 行高（line-heigth）
1.内容区域高度只与字号以及字体有关，与line-height没有任何关系。
2.在simsun字体下，内容区域高度等于文字大小值。
在simsun(宋体)字体下：font-size + 行间距 = line-height
font-size:240px
line-height:360px 则行间距= 360-240 =120px
行间距上下拆分，就有了“半行间距”
总结：行高决定内联盒子高度，行间距墙头草，可大可小，保证高度正好等同于行高。
问题 如果行框盒子里面有多个不同行高的内联盒子，行框里面的行高怎么表现。
一般情况下认为由行框里面最高的盒子决定。
多行文本的高度就是单行文本高度累加。
如果行框盒子里面混入inline-block水平元素（如图片，按钮），高度如何表现呢
第四节：line-height各类属性值 ——深入理解line-height不同类别值得不同表现
line-height支持属性值
normal line-height:normal 默认属性值 跟用户浏览器
number line-height:1.5 根据当前元素的font-size大小计算。假设文字大小20则行高 line-height = 1.5*20px = 30px
length line-height:1.5em rem px pt
percent line-height:150% 相对于设置了该line-height属性的元素的font-size计算 假设文字大小20px,则实际行高像素值是：150%*20 = 30px
inherit line-height:inherit input框等元素默认行高normal，使用inherit可以让文本框样式可控性更强。
问题 line-height:1.5
line-height:150%
line-heigth:1.5em
差别
表现上无差别，应用元素有差别，line-height:1.5所有可继承的元素根据font-size重计算行高
line-height:150%/1.5em当前元素根据font-size计算行高，继承给下面的元素。
推荐使用数值。不推荐使用相对值。
tip:body全局数值行高使用经验
body{font-size:14px;line-height:1.5} 14*1.4286=12 行高等于20
匹配20像素的使用经验---方便心算
缩写
body{font:14px/1.4286 'microsoft yahei'}
第五节:line-height与图片的表现
行高会不会影响图片实际占据的高度？
行高不会影响图片占据的高度。
隐匿文本节点 图片是inline-block表现形式，图片为了和文字在一个基线上。所以在图片下方会留白。
如何消除图片底部间隙？
1.图片块状化-无基线对齐
img{diaplay:block}
2.图片底线对齐
img{vertical-align:bottom} 底线对齐
3.行高足够小-基线位置上移
.box{line-height:0;}
小图片和大文字
基本上高度受行高控制
第六节：line-height的实际应用
实现大小不固定的图片，多行文字垂直居中。
图片水平垂直居中
.box{line-height:300px;text-align:center;}
.box>img{vertical-align:middle;} 基线往上1/2x高度
多行文本水平垂直居中
.box{line-height:250px;text-align:center;}
.box>.text{display:inline-block;line-height:mormal;text-align:left;vertical-align:middle;}
实际应用：
代替height，避免ie6/7下的haslayout