《CSS世界》读书笔记：line-height

本文大部分内容摘自 张鑫旭的《CSS世界》，外加一些自己的理解。在此仅作学习记录，无商业用途。

1. 行距与半行距

• “行距”分散再当前文字的上方和下方，也就是即使是第一行文字，其上方也是有“行距”的，只不过这个“行距”的高度仅仅是完整“行距”高度的一半，因此，也被称为“半行距”。
• 行距 = line-linght - font-size

2. 半行距与精确的布局

  在查看设计图的时候，我们经常可以看到某段文字的下方与某个元素的距离。这时候的距离往往是不包含半行距的，而我们使用padding或者margin直接设置设计图上的尺寸是不准确的。
  如果需要做到精确的话。我们需要将标准值减去半行距。假设line-height: 1.5; font-size: 14px; 则：

标准值 - （14 * （1.5 - 1）） / 2

（当line-height: 1;时line-height == font-size的文字高度）
上述公式得出的结果即精确的距离值。
  但是由于CSS属性并没有小数像素的概念。因此如果时文字的上边距，则向下取整；如果是文字下边距，则向上取整，因为绝大多数的字体在内容区域中都是偏下的。而上述得出的结果是3.5px，我们向上取整是4px。

3. 为什么line-height可以让内联元素“垂直居中”？

 行高可以实现“垂直居中”原因在于CSS中“行距的上下等分机制”，如果行距的添加规则是文字的上方或者下方，则行高是无法让文字垂直居中的。

4. 使用line-height实现多行文本"垂直居中"

<style type="text/css">
	.box{
		line-height: 120px;
		background-color: #f0f3f9;
	}
	.content {
		display: inline-block;
		line-height: 20px;
		margin: 0 20px;
		vertical-align: middle;
	}
</style>

<div class="box">
	<div class="content">螺丝钉解放是开了房间两款手机发了多少积分</div>
</div>

这里实现的是近似垂直居中。适当缩小屏幕可以看到多行垂直居中的效果。由于这里的垂直居中时使用line-height:120px;实现的，如果所以文字不能太多，不然无法实现垂直居中。

屏幕变小文字变成多行的时候，多行的文字及一个整体，这个整体的基线与x字母对齐，因此文字会偏上，使用vertical-align: middle;让这个整体的"中部"（这个表述可能不是很准确）与x字母的基线对齐，就实现了近似居中对齐。

5. 关于line-height的各类属性值

5.1 normal

• line-height: normal; 与font-family相关，不同字体解析出来的line-height值可能会不同。

5.2 数值，百分比，长度值

• line-height: 2;父级使用数值时，子元素继承的也是相同的数值。
• line-height: 50%; 父级使用百分比时，子元素继承的子元素的【font-size * 50%】后的到的数值。
• line-height: 21px;父级使用长度值时，子元素继承的也是相同的长度值。如果是line-height: 2em;那么子元素继承的情况和百分比值的计算方式相同。

6. line-height无法精确控制行框盒子的高

<style type="text/css">
body,html{
	margin: 0;
	padding: 0;
}
.box{
	background-color: red;
	line-height: 32px;
}
.box > span {
	font-size: 24px;
}
</style>

<div class="box">
	x<span>文字</span>
</div>

 上面.box明明设置了line-height:32px;而实际上的高度却超出了。这是因为：font-size:24px;是设置在元素上的，这就导致了外部<div>元素的字体大小和<span>元素由较大出入。
 对于字符而言，font-size越大字符的基线位置越往下，因为文字默认全部都是基线对齐，所以当字号大小不一样的两个文字在一起的时候，彼此就会发生上下位移，如果位移距离足够大，就会超过行高的限制，而导致出现意料之外的高度。

解决办法：

• 让内外的字体大小一致。设置<div>的字体大小也为24px;
• 改变对齐的方式。设置<span>元素的对齐方式为：vertical-align: top;

7. 总结

1. line-height的作用点是”幽灵空白节点“。
2. ”幽灵空白节点“存在于行框盒子的前面。
3. 如何形成行框盒子：
   1）块级元素 > 内联元素(非空)
   2）display:inline-block;
4. line-height垂直居中，利用的是CSS中“行距的上下等分机制”。
5. line-height: normal; 与font-family有关。
6. line-height: 2;的继承是直接继承；line-height: 50%; line-height: 2em;的继承是根据子元素的font-size计算后的值，进行继承。
7. 非替换元素的内联元素的高度由line-height决定，而不由font-size决定。

8. 面试题：display:inline-block；作用于块级元素与作用于内联元素有什么区别？

• 作用于块级元素：

<div> <!--父级元素-->
	<div style="display:inline-block;"></div>  <!--子元素-->
</div>

1. 使块级元素可以多个并排。
2. 让块级元素形成一个行框盒子，并拥有”幽灵空白节点“，使父级元素的高度增加，子元素高度不变。
3. 让父级元素上使用line-height可以生效。

• 作用于内联元素元素：

<div> <!--父级元素-->
	<span style="display:inline-block;"></span>  <!--子元素-->
</div>

这里内联元素要区分非替换内联元素与替换内联元素：

• 非替换内联元素

1. 使内联元素可以设置宽高。
2. 使内联元素形成一个独立的行框盒子，line-height的值等于内联元素的高。(图中共有两个行框盒子，它们的前面各有一个”幽灵空白节点“)
   

• 替换内联元素

1. 对于像<img>、<iframe>、<object>、<video>这种有宽高属性或者是像<audio>这种有设置默认宽高值(width:xx;height:xx;)的内联元素，设置display:inline-block;后，line-height也不能决定它们的高度。
2. 对于<input>和<textarea>不论是否设置display:inline-block;，line-height可以改变它们的高度。

参考资料

《css世界》 张鑫旭 ——5.2 内联元素的基石 line-height

真正的能理解CSS中的line-height，height与line-height