line-height理解

1.line-height含义

两行文字基线之间的高度距离

2.line-height属性值

2.1简介(normal-number-length-percent-inherit)

.1 normal 默认，跟着浏览器走，且与元素字体关联
.2 number 行高=当前字体尺寸*数字

根据当前元素的font-size大小计算:假设文字大小font-size为20像素，则实际的行高像素值：line-height=1.5*20px=30px;

.3 length 长度值，固定或相对单位皆可
.4 percent 行高=当前字体尺寸*百分比

相对于设置了该line-height属性的元素的font-size大小计算
假设：line-height=150%；文字大小为20px，则行高line-height=150%*20=30px;

.5 inherit 从父元素继承行高。IE8+.

例如：input框等元素默认行高是normal，使用inherit可让文本框样式可控性更强

2.2 使用百分比、em与数值之间的差别

计算无差别

line-height:1.5. 所有可继承元素根据font-size重计算行高；
line-height：150%/1.5em. 当前元素根据font-size计算行高，继承给下面的元素.(父级元素计算行高后继承给子元素)

推荐做法：使用数值.

2.3 body全局数值行高使用经验

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

建议：匹配20像素(body默认字体*line-height=20px)的使用，利于心算

line-height=20px/14px=1.42857(14……)

因为chrome浏览器高度匹配出19px，所以使用1.4286

body{font-size:14px; line-height:1.4286;}
缩写形式：body{font-size:14px/1.4286 'microsoft yahei'}

3.line-height与图片表现

1.行高不会影响图片占据的高度

行高和图文混排

图片会和文字基线baseline对齐 ，所以图片下会有缝隙现象存在。
即使没有文字，图片下边缘也还会有空隙。
why？
**“隐匿文本节点” ** 看不见的文字，但实际上是不存在的
line-height会影响容器高度

2.消除图片底部间隙的3种方式

1.图片块状化 img {display:block;}

2.图片底线对齐 img {vertical-align:bottom;}

3.line-height足够小-基线位置上移 .box {line-height:0;}

小图片和大文字 基本上高度受行高控制

4.行高的实际运用

大小不固定的图片,多行文字垂直居中

4.1 图片水平垂直居中

IE8+ .box { line-height:300px; text-align:cneter;} .box>img {vertical-align:middle}

使用middle后，实际上是不能完全垂直居中。基线向上1/2x高度。不同字体在四线中表现不会完全相同，有下沉的和偏上的。

4.2多行文本实现水平垂直居中

IE8+ .box{line-height:250px; text-align:center;} .box>.text { display:inline-block; line-height:normal; text-align:left; vertical-align:middle; max-width:100%; }
多行文字水平垂直居中实现的原理上面图片实现的一样，区别在于文本所在的容器的display水平转换成和图片一样，也就是inline-block，以及重置外部所继承的text-align和vertical-align的值。

4.3 代替height，避免IE6/7下的haslayout

在ie6/7下设置高度，会产生haslayout，冲破父元素的高度。

在ie6/7下设置高度的正确写法：
height:36px;
line-height:36px;

错误写法：
{height:36px; line-height:36px;} 其中的height已经多余了

慕课网-张鑫旭