关于IFC（涉及line-height、vertical-align、font-size等概念）的纠误与理解

①font-size

    font-size是什么?个人理解就是指定字体的大小。

    细心的你会发现，实际上哪怕设置了font-size: 自定义值，字体真正显示的高度也不会是自定义值。

    那这是为什么？

    此时,你需要了解字体的度量，了解设计师们是怎么对字体进行定义的。详情请前往:https://zhuanlan.zhihu.com/p/25808995

（注，其中有些概念个人反复研究觉得不太正确，后面会讲）

    简单而言，字体设置的空间外还留有一段空间（个人推测: 为图文排列设定好了一个默认值，放置紧密排列）

    PS：补于2020年6月8日17:30:40

字体表面看起来之所以外部还有一段空间，其一是和字体的设计相关，其二就是line-height了，line-height的默认值是normal，也就是说不同的字，其line-height的变化不一样，这说明了line-height也与字体设计有关，因此非常重要的概念就是字体的设计了，字体有ascender/descender/cap height/baseline等一系列概念，其中还有一个概念叫line-gap，这个值就是字体本身用来计算normal的关键所在了，一般而言，line-gap不为负，同时由于上划线等等的影响，文字实际的高度则要更高一点，而且font-size越大，表现的就更明显，需要注意的是，一旦子类设置了line-height：数值，那么字体本身的normal值就不会起作用了，而且因为数值是相对于font-size进行变化了，因此在使用数值时很容易就出现了line-height小于字体高度的情况

②line-height

    特性1.默认值为normal，normal值由字体度量决定，不同的字体，不同的normal默认值

    特性2:content-area（上述链接中所使用名称，这里仍引用，但概念不同，区分content-box）的大小也是由字体度量决定，字体度量一旦确定，那么content-area的大小也是不会改变的，（个人推测 =>同时即使设置了line-height，也不会重新去计算字体大小，原因=>未设置具体数值之前，normal非1，那么就有line-gap（详情查看上述链接），因此，会覆盖line-gap，相当于覆盖掉了原先的normal值，只会将line-height减去font-size的值对半分在上下）

    链接误区：content-area ≠ background作用域,content-area只单纯指字体的度量，而background作用域是padding-box以内的区域。

    注意: 字体的度量是无法通过css查看出来的，因此这里无法判断是否真正的对半分（是不是很无聊。。。）。

    特性3:设置数字值是根据font-size来计算的。

③line-box

    计算规则: 子元素最高位置 减去 子元素中最低位置，即为line-box。

    链接误区：line-box高度 ≠ line-height的高度（子元素中line-height高度最高的位置减去最低的位置），这是错误的，因为对于替换内联元素来说，margin与padding都能够影响到line-box。

④vertical-align

    属性值: top/bottom/middle/text-top/text-bottom

    middle计算的规则是baseline位置加上x-height的一半，基本上在链接里面都有讲，非常仔细，大家多了解了解。

如果有什么疑问或者错误的地方，欢迎大家提出~~~