来自腾讯的面试题：line-height:1.5;和line-height:150%;的区别？
line-height，又称行高，指的是两行文字基线之间的距离，又可以称为这行文字所占的高度。
那什么是基线？下图中的红线就是基线（baseline）。基线（baseline），指的是一行字横排时下沿的基础线，基线并不是汉字的下端沿，而是英文字母x的下端沿。
行距如下图所示。
行距 = line-height - font-size，行距会在一行文字中，上下等分，因此“半行距”就是“行距”的一半。
line-height高度理解
默认空<div>高度是0，但里面一旦写上文字，<div>高度就有了。此时的高度完全是由line-height属性决定的。
<div class="test1">看我高度1</div>
.test1 {
font-size: 16px;
line-height: 0;
border: 1px solid #ccc;
background: #eee;
}
<div class="test2">看我高2</div>
.test2 {
font-size: 0;
line-height: 16px;
border: 1px solid #ccc;
background: #eee;
}
结果如上图所示，第二段代码虽然文字看不见，但高度依然存在，而第一段元素的高度只有边框border的高度。
line-height可以让内联元素“垂直居中”
在上面我们了解了，对于非替换元素的纯内联元素，其可视高度完全有 line-height决定。
- 要让单行文字垂直居中，只需要
line-height这一个属性就可以，与height一点关系都没有。 line-height可以让单行或者多行元素近似垂直居中。
行高line-height能实现“垂直居中”的原因在于CSS中“行距的上下等分机制”，“近似”是因为文字字形的垂直中线位置普遍要比真正的“行框盒子”的垂直中线位置低。
（回到主题），深入line-height的各类属性值
line-height的默认值是normal，还支持数值、百分比值以及长度值。
| 值 | 描述 |
|---|---|
| normal | 默认。设置合理的行间距。 |
| number | 如line-height:1.5;，其最终的计算值是和当前font-size相乘后的值。1.5 * 14px = 21px; |
| length | 设置固定的行间距。如line-height: 21px;或者line-height: 1.5em;，em是一个相对font-size的相对单位，最终计算值也是和当前font-size相乘后的值。1.5 * 14px = 21px; |
| % | 如line-height:150%;，其最终的计算值是和当前font-size相乘后的值。150% * 14px = 21px; |
| inherit | 即继承父元素line-height的值，父元素是多少，当前节点的line-height就是多少，如果当前节点的子节点不设置任何的line-height，子节点的line-height也是这个值。 |
normal值
只要字体确定，各个浏览器下的默认line-height解析值基本上都是一样的，然而不同浏览器所使用的默认中英文字体并不是一样的，而且不同操作系统的默认字体也不一样。也就是说，不同系统不同浏览器的默认line-height都是有差异的。因此在实际开发中，line-height的默认值都需要重置。在reset.css中，会有
body {
line-height: 1;
}
normalize.css中，有
html {
line-height: 1.15; /* 1 */
}
button,
input,
optgroup,
select,
textarea {
line-height: 1.15; /* 1 */
}
line-height:1.5;，line-height: 1.5em; 和line-height:150%;的区别？
乍一看，line-height:1.5;、line-height: 1.5em; 以及line-height: 150%;这三种用法计算的结果是一样的，最终计算的行高都是根据font-size来计算的。是不是它们可以相互替代呢？其实不然，实际上，line-height:1.5;和另外两个的继承细节有些区别。
如果使用数值作为line-height的属性值，那么所有的子元素继承的都是这个值，即所有的子元素的line-height都是自身font-size乘以该数值；如果使用百分比或者长度值作为属性值，那么所有子元素继承的是最终的计算值，即不管子元素自身的font-size是多少，line-height都是固定的值。
