关于line-height以number设置值引发的css属性值的规范标准思考

line-height设置值的几种方式

第一个normal默认值是22px
第二个number最终结果是number当前元素font-size值（默认值16px）
第三个length固定值,固定值length是具体像素
第四个 %当前百分比16px
第五个inherit继承父元素的

以第二种方式设置line-height踩坑记录

先上代码，一睹为快，如下是react中截取的一部分代码，我要实现的是p标签在盒子内垂直居中

<div style={{ height: 20, border: '1px solid #000' }}>
        <p style={{ lineHeight: 20, border: '1px solid red' }}>123</p>
 </div>

预览结果

what?

我明明设置的盒子的高度也是20啊，最后怎么变成了这样了？？？？
后来，公司大佬给我解释说，css针对line-height的数值计算规则是以当前元素的文字大小乘以数值计算的，好家伙！！

因为我这里没有给任何p的父节点设置font-size值也就是说最终line-height计算出的结果是20*16px=320px。

就是说如果我将p标签的父节点div加上font-size:10px的话，line-height就会重新计算得到20*10px=200px。

 <div style="border: 1px solid #aaa;height: 20;">
        <p style="line-height: 20;">123</p>
 </div>

那么问题来了，在react框架中height设置number时为啥不根据字体大小计算呢？？？？react框架为什么直接将height解析成了像素？？为什么css不支持给height设置number类型？？这是不是css针对单位类型设计的不合理？？？

这里有很多耐人寻味的地方，如果大佬的你坐在电脑旁边看到了我的博客，真的希望不吝啬评论指导！！