css之line-height

行内框盒子模型
1."内容区域"(content area)
2."内联盒子"(inline boxes)
3."行框盒子"(line boxes)
4."包含盒子"(containing box)

内联元素高度的由来：是由line-height决定的；而不是由字体的大小

（font-size）决定；
单行文字的行高：
1.行高由于其继承性，影响无处不在，即使单行文本也不例外；
2.行高只是幕后黑手，高度的表现不是行高，而是内容区域和行间距

。
行高（line-height）=内容区域高度（content area）+行间距

（vertical spacing）
行高决定内联盒子高度;行间距墙头草，可大可小（甚至负值），保证

高度正好等同于行高。

line-height:normal;默认属性值）与用户浏览器，且与元素字体有

关。
line-height:<number>:根据当前元素的font-size大小计算：如设置

成1.5，1.5*字体大小。
line-height:<length>;line-height:1.5em,20px;使用具体的长度

作为行高值。
line-height:percent;相对于该line-height属性的元素的font-size

大小计算。
line-height:inherit;比如一些控件，如input框，其行高是normal

，我们需要重置，使用inherit可以让文本样式可控性更强。
line-height:1.5,所有可继承元素根据font-size重计算行高
line-height:150%, 当前元素根据font-size计算行高，继承给下面

的元素
line-height:1.5em 当前元素根据font-size计算行高，继承给下面

的元素
计算无差别，应用元素的差别。
body{font-size:14px;line-height:20px}

匹配20px的使用经验——方便心算
line-height = 20px/14px = 1.42857 高度是：19px （chrome）
body{font:14px/1.4286 "宋体 微软雅黑";}

行高不会影响图片实际占据的高度！！！
消除图片底部间隙的方法：
1.图片块状化——无基线对齐 img{display:block;}
2.图片底线对齐 img{vertical-align:bottom;}
3.行高足够小——基线位置上移 .box{line-height:0;}

实际应用
图片水平垂直居中：
.box{line-height:300px;text-align:center;}
.box>img{vertical-align:middle;}

多行文本水平垂直居中：
.box{line-height:250px;text-align:center;}
.box>.text{display:inline-block;line-height:normal;text-

align:left;vertical-align:middle;}