前端日记02_关于line-height的那些事

前言

其实看了很多line-height的文章，我觉得最重要就是懂得它是个什么，怎么和height结合使用。关于四个盒模型因为暂时不知道有啥用所以我没有了解(毕竟我这个人学了不用马上就忘)，整了挺久的就写了这么点，希望能帮到大家~

1 line-height的个人资料

1.1 line-height是啥

此处放一张别人的图（自己仿着做了一张）：
（1）由上图可知，line-height即两基线间的距离，也可以理解为半行距*2+font-size，。
（2）行间距即行距，line-height即行高，注意二者并不相同，而行间距的大小主要依赖line-height来调节。

1.2 line-height咋用

以下是来自W3school的截图:

实践出真知，下面是代码片：

//html代码片段
<div class="father">
	<p >来和胖胖一起学习！</p>
	<div class="son">来和胖胖一起学习！</div>
</div>

//css代码片段
.father{
	line-height:120%;
	font-size:20px;
}

p{
font-size:18px;
}

.son{
font-size:12px;
}

	.father	p	.son
font-size	20px	18px	12px

第一行是.father的line-height取值，开始计算

	normal	1.6	24px	120%	inherit
.father	约24px	32px	24px	24px	20px
p	约21.6px	32px	24px	24px	20px
son	约24.4px	32px	24px	24px	20px

(1)normal的值约1.2，后代元素计算line-height时不会忽略自身的font-size，计算时为normal*自身font-size。
(1)计算出的line-height可以被后代元素继承
(2)有时我们可以看到段落松紧不一，这是因为line-height因取值不同而可能不会因为font-size大小而做出一定比例的伸缩，详情见这篇文章。

PS：设置line-height时，考虑到自动缩放的问题，这里认为最佳方式为设置数字。

2 line-height VS height

2.1 line-height 与 height

两者结合使用居多。
例：文字居中
(1) height=line-height
PS:height可以去掉，高度由line-height撑起来。

(2) height>line-height

(3) height<line-height

3 参考资料

[1] 深入了解css的行高Line Height属性
[2] css中的line-height