深入理解-CSS内联元素之font-size
impress 2019-06-27
在前端开发中，似乎控制不同大小文字之间，或者文字与图标之间对齐总是不那么得心应手，总觉得少了点什么，这其中其实跟CSS中几种跟内联元素相关的属性有很大的关系，从我的感觉看，平时遇到的30%的css问题都是由于搞不清这几种属性的关系有关。这里第一篇文章先介绍字体，掌握相关概念。
技术是以目的为导向的，那么先来抛出一个问题，前端开发中我们使用font-size来设置文字的大小，但检查元素后发现内联元素的高好像大多数时间并不是我们设置的font-size大小，这是为什么哪？
这里面涉及到浏览器的影响，字体的设计等方面的知识。尤其是字体设计是一门高深的学问，而我们只是为了开发网页中控制文字大小和对齐，所以这里我们只取我们需要的部分，下面先介绍字体概念。
字体相关概念
我们先来了解文字的各个概念。图看起来更直观，所以我简单画了个图。
基线
对照着图，可以看出基线是位于字母x下方的那条线，所有字符都基于这条线进行定位。这应该大家比较常见，毕竟vertical-align的默认值就是baseline，指的就是这条线。
em-box
em-box可能比较少见，但大家一定知道单位em。1em跟该元素的font-size大小相同。还是以图为例如果设置font-size: 20px，那么em-box的高度就为20px。
content-area
这是一个很重要的概念，content-area翻译成中文是内容区域，这里图中没有标出，因为通常默认情况下，content-area与line-height是一样高的。给一个内联元素设置背景，这背景所占的区域就可以看成内容区域。
大多数情况下content-area于em-box的高度不同，conent-area的高度受到font-family和font-size的影响，有时候即使font-size一致可能以为字体不同导致content-area也不一样，这是在字体设计的时候就决定了的。而em-box只受font-size影响。这也就解释了为什么我们有时候检查元素看到的高度与实际字体设置大小不一样的问题。
半行距
先看行距怎么算，行距 = line-height - font-size。半行距就是将行距一分为二，一份加在em-box的上面，一份加在下面，就构成了完整的文字高度。
x-height
x-height顾名思义就是x字符高度的意思，1ex就是x-height的值，通常没什么作用，但是对于我们理解概念有很大帮助，css中vertical-align: middle的解释就是Aligns the middle of the element with the baseline plus half the x-height of the parent，意思就是将该元素的中心点与父元素基线加上x-height高度的一半对齐。
这句话里有几个关键的部分一定要弄明白该元素的中心点、父元素的基线和基线加上x-height高度的一半，我们常常使用veritcal-align: middle出错，往往就是这几个点没有搞清楚，这里先试着理解，以后的文章会详细说明。
以下部分是介绍字体单位和一些理解，如果已经了解可以直接跳过，别浪费时间，时间宝贵~
度量单位
字体的大小在css中用font-size来表示，它的度量单位有很多，主要分为三大类：关键词类型、数值类型、百分比类型。
关键词类型
关键词类型分为绝对尺寸和相对尺寸。由于使用的较少，不必记忆，所以这里仅仅罗列出来。
绝对尺寸：xx-small、x-small、small、medium、large、x-large、xx-large。
相对类型：smaller、larger。
数值类型
数值类型在平时使用较多，而数值类型的单位常用的有px、em和rem，可能偶尔会用到ex其他基本用不到，不再列举。px表示像素，em是相对于父元素的字体进行计算，而rem则是相对于根元素<html>的字体大小进行计算。
其他应用
神奇的font-size: 0
font-size: 0这种写法很常用，在以前的Chrome中会限制font-size小于12px并且大于0的时候按照12px计算，但我最近在最新版的Version 65.0.3325.181 (Official Build) (64-bit)Chorme下测试，发现已经没有这个限制了（不知道什么时候修改掉的-_-）。使用font-size: 0让字体大小变为0，通常也会使得line-hight变为0，这经常可以解决line-block元素出现的空隙问题，这个问题具体的原因我们后面再说。
看了很多文章最后总结和整理了这些，下一篇介绍line-height说说line-height在内联元素中的作用。在这篇文章中如有错误或我与大家理解不一致的地方，欢迎指出，感谢~。
