你可能忽视的CSS特性却被代码检查工具推荐使用

上周我在提交代码时，代码检查工具报了一个错，大概的意思就是line-height的值需要去掉px单位。去掉像素单位没问题，但是为什么要强制去掉呢？去掉有什么好处呢？最后我们组的一位小朋友告诉了我缘由！

定义

我想从事前端的同学没有人不知道line-height是代表行高的，而且所有浏览器都支持，所以不论是pc还是mobile又或是app都能尽情的使用！我一般计算行高时，就用字体大小加上行间距，多数情况下是准确的，也可以测量一行文字的底部到下一行文字底部的距离。

行高

取值

line-height能设置哪些值呢？

带像素单位的数字（line-height：100px;）我比较常用

纯数字（line-height：1.8;）

百分数（line-height：80%;）

em（line-height：2em;）

第一种情况：

demo1

我们设置了line-height是40px，font-size是24px，这是我们常见的设置方式！

现在我们把里面的p标签也设置字体大小

demo2

现在p标签的字体大小为50px，我们发现文字的行高没有发生变化依然是40px，但是字体变大了，导致文字发生了重叠（此时由于p标签的字体大小覆盖了容器上的字体大小）。

现在我们尝试第二种情况：

demo3

我们把第一种情况的line-height设置成了1，我们发现文字间的间距变大了，行高现在变成了50px，是不是很神奇！

单个数字的行高计算公式 行高=line-height * font-size

这里的原因就是如果父容器上的line-height是加像素单位的数字，子节点不会重新计算行高，直接继承父元素设置的行高，如果line-height直接是一个数字，子节点会重新计算行高（子节点的字体大小乘以父元素的line-height的值）！这里就是为什么推荐使用单个数字作为行高值的原因！

我们再来看看第三种情况：

demo4

现在line-height=60%，font-size=40px，以容器的字体大小计算：行高=40*60%即24px，你会发现里面的p标签的行高也是这个数，没有重新计算。

第四种情况：

demo5

把line-height设置成了2倍的em即当前字体大小的两倍，从上图可以发现，子节点依然是直接继承并没有重新计算行高！

总结

从上面四种情况可以看出，只有line-height的值设置单个数字可以使子节点根据自己的字体大小重新计算行高，其实这样会更加灵活，每个child都能灵活控制自己，所以代码检查工具推荐我们使用这种方式！

喜欢我的文章就关注我吧，有问题可以发表评论，我们一起学习，共同成长！（如果你看到这里就关注一下吧，你们的关注是我的动力！）