《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

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页