①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的一半,基本上在链接里面都有讲,非常仔细,大家多了解了解。
如果有什么疑问或者错误的地方,欢迎大家提出~~~