css之line-height

bobo昨天去搜狗面试遇到一个技术疏漏之CSS line-height，回来补一下：
什么是line-height呢 顾名思义是行高，表示两行文字基线之间的距离
1，何为基线？

字母下边缘的位置，目的为了使英文字母排列整齐（英语作业本上的倒数第二条加粗线），基线是任意线（中线，上边缘线，下边缘线……）定义的基础

2 . line-height 与行内高宽盒子模型
所有内联元素的样式表现都与行内框盒子模型有关！例如浮动的图文环绕效果。
行内框盒子模型：
a.“内容区域”是一种围绕文字看不见的盒子，content area 的大小与 font-size 大小相关 （选中的时候变色的部分）
b.“内联盒子”inline boxes不会让内容成块显示，而是排成一行，如外部含inline水平标签：span，em，a等，就是内联盒子。纯文字是匿名内联盒子，
c.“行框盒子”ling-boxes由一个一个“内联盒子”组成
d.<p>便签所在的”包含盒子”containing box：由一行一行的“行框盒子”组成
即：containing box>ling-boxes>inline boxes或content area
3 . 内联元素是由行高line-height 决定的
高度的表现不是行高，而是内容区域和行间距
内容区域content area+行间距vertical spacing=行高line-height
内容区域的大小只跟字号font-size和字体font-family有关，与line-height无关；
（simsun字体（宋体） 内容区域content area等于字体大小font-size，即font-size+行间距vertical spacing=行高line-height）
行半间距=（行高line-height-内容区域content area）/2
4 .line-height的各类默认属性值：
line-height：normal 与浏览器和元素字体关联
line-height：数值1.5 根据当前字体大小font-size相关，1,1.5……倍 推荐！
line-height：长度20px，1.5em 使用具体长度作为行高值
line-height：百分比 相对于font-size的百分比
line-height：inherit 继承

body全局数值行高使用经验：匹配20px

body { font-size:14px ; line-height: 1.42856 ;}

5 .行高与图片
首先，行高不会影响图像实际占据的高度；
如何消除图片底部的间隙？
a. 图片块状化，无基线对齐：img{ display:block;}
b.图片底部对齐 ：img{ vertical-align:bottom;}
c.行高足够小，基线位置上移 ： .box{ line-height:0;}

6 . line-height的实际应用：
a.单行水平居中（图片或文字）：

 .box { background-color: #0095cd;line-height: 300px; text-align: center ;} .img { vertical-align: middle;}

在实际应用中，如果让单行文本在元素中垂直居中，可以将元素的高度和行高值设置为相同即可。

b. 多行文本水平居中：

 .box { background-color: #0095cd;line-height: 300px; text-align: center ;} .text { display: inline-block ; text-align: left; vertical-align: middle; line-height: normal}

与图片一样，区别在于要把多行文本设置成与图片一样的display: inline-block ;并且重置外部继承的vertical-align和line-height