【CSS】内联格式化上下文 IFC（inline formatting context）
IFC（inline formatting context）
- 问题：font-size与font-family造成的字体高度问题
- 字模（em-square）
- 在字模中绘制字体
- 一个字体的高度
- 行盒（line-box）
-
- line-box高度计算的细节：
-
- 对于内联元素
- 对于行内块元素
- 例如：
- line-height属性
-
- line-height作为行内元素的高度
- line-height的取值
-
- normal
- number
- length
- percentage（百分比）
- vertical-align属性
-
- 基线位置
- vertical-align作用
- 取值
-
- 相对行的关键字值（随line-height变化）
- 相对父元素的关键字值（不随line-height值变化）
问题：font-size与font-family造成的字体高度问题
使用相同的font-size，但使用不同的font-family，渲染出来的line-height是不同的
并且font-size:100px时元素的height也不是100px：
为什么会造成这种原因呢？是因为字体设计导致的！
字模（em-square）
字模em-square 又称为 em size，是字体设计中的概念，在一个字体中，每个字符都被放置在自己的空间容器中，即字模
字模的高度称为“ em”，它源自大写字母“ M”字符的宽度，因为字母的比例被做成了方形（因此有了“EM Square”的称呼）
在计算机字体中，em 是空间的数字化定义总量
- 在 OpenType 字体中，UPM 或 em 大小通常是 1000 单位
- 在 TrueType 字体中，UPM 约定是 2 的幂，通常是 1024 或 2048
当时用字体来设置样式时，em 将会缩放到需要的值
- 这意味着对于 font-size:100的字体样式时，1000 单位在这个实例中将会缩小到 100px
在字模中绘制字体
知道了你的字体将会使用 1000，1024 或 2048UPM 后，你需要设定你的字形的绘制，以保证你字体样式的所有面都充分地填入 UPM 空间内
字体设计时有一些刻度和度量线，度量线的位置可以自定义：
-
基线：
-
顶线：
-
X线：
一个字体的高度
使用font-face选择一种字体后，这种字体定义其字模em-square(字模)，每个字符将会绘制出自己的正方形容器，这个正方形使用相对单位和生成一个1000单位（也可以是1024，2048或者其他）
设计字体时还可以设置一些度量线（ascender,descender,capital height,x-height等），有些值（顶线、基线）是超出em-square之外的值
比如em-square是1000，顶线(ascender)是1100和底线（descender）是540，这意味着该字体在1000个单位的em-square使用了1100 + 540个单位，也就是说font-size:100px的时候，其高度是164px，这个计算高度定义了字体元素内容高度（content-area）
在字体设计时Capital高度是640和x-height的值是485，定义了大写字母是68px高度（680个单位）和小写字母（x-hegiht）是49px高度（485个单位）
行盒（line-box）
当一个行盒（line-box）元素呈现在屏幕上，它根据它的宽度可以有很多线，每一行都是由一个或多个行内元素（inline box）（HTML标签元素(如span之类的inline属性标签)或匿名内联元素文本内容）组成
line-box的高度是基于它的子元素高度的，浏览器为每个行内元素计算的高度都是line-box（子元素的最高点到最低点），因此line-box的总高度足以包含所有子元素（默认情况下）。
line-box高度计算的细节：
对于内联元素
- padding和border增加了其background区域，但不会增加内容区域高度（甚至是line-box高度）。
- 因此，你在屏幕上看到的不一定就是内容区域。
- margin-top和margin-bottom对内联元素不生效。
对于行内块元素
inline-block和blocksified行内元素，padding，margin和border都会增加高度，所以内容区域和line-box的高度也会增加
例如：
- p标签会生成三个line-box：第一个和最后一个每个包含一个匿名内联元素（文本内容），第二个包含了两个匿名内联元素和三个
元素(黑色边框)产生了一个line-box（白色边框），其包含了内联元素（实心边框）和匿名内联元素（虚线边框）
- 第二个line-box明显比其他的line-box要更高，这是根据子元素的内容区域（content-area）计算得来，更具体地说，是使用了Catamaran字体
line-height属性
内联元素有两个不同高度：内容区域（content-area）高度 和 行距高度
- 内容区域高度是由字体来决定的
- 行高高度是line-height定义的，它的高度用于计算line-box的高度
leading：行距高度和内容区域（content-area）高度差称为leading（行距）
- leading一分为二，一半添加在内容区域顶部，另一半添加在内容区域底部，内容区域总是在行高区域的中间
leading = (lineHeight – fontSize)
line-height作为行内元素的高度
这些特定的行内元素，高度计算基于他们的盒模型（height、margin和border属性），但如果hegiht的值是auto，则使用line模型计算高度，即line-height就是行内元素的高度
特殊元素：
- 替代内联行内元素（
，，
- inline-block元素
- 行内元素参与特定格式化上下文（如，Flexbox元素，和所有的Flex项目）
line-height的取值
normal
line-height的默认值是normal，normal一般为1或1.2，这取决于元素的 font-family
在设计字体时，字体的顶线(ascender)和底线（descender）是超出字模em-square之外计算的，此时字体的**字体元素内容高度（content-area）**将会超过字模定义大小，超出的比例就是line-height的默认值是normal的值
例子：Catamaran字体
Catamaran的em-square是1000，但其顶线ascender和底线descender的值：
- 生成的Ascent/Descent: ascender是770，descender是230。用于绘制字符
- 度量的Ascent/Descent: ascender是1100，descender是540。用于内容区域高度
度量线的间距：通过Ascent/Descent度量使用line-height: normal（hhea）
这些度量都是特殊字型，由字体设计师来设置
number
所用的值是无单位数值乘以元素的 font size
计算出来的值与使用数值指定的一样，大多数情况下，使用这种方法设置line-height是首选方法，在继承情况下不会有异常的值
- 此时浏览器保留font-size/line-height比例，即使字体大小改变，leading也保持原有的比例
line-height:1是一个非常糟糕的做法
- 当取值为数值时，所用的值是无单位数值乘以元素的 font size，而字体设计时内容区域往往都大于1
length
指定
长度
percentage（百分比）
与元素自身的字体大小有关，计算出的值是给定的百分比值乘以元素计算出的字体大小。
vertical-align属性
基线位置
一个inline-block元素，如果里面没有inline内联元素，或者overflow不是visible，则该元素的基线就是其margin底边缘，否则，其基线就是元素里面最后一行内联元素的基线
vertical-align属性，设置垂直对齐方式，只针对 行内元素 或 行内块级元素（块级元素无效）
- 设置单个元素在line box中与其他inline box的对齐方式
- 可以设置图片/表单与文字的对齐
vertical-align作用
vertical-align属性对于行内格式化上下文中的leading有很大的作用，vertical-align的默认值是baseline，vertical-align值为baseline表示基线对齐
比如：并列的两个字体元素，两个字体的font-size不相同，但是两个元素都会按照vertical-align：baseline对齐
取值
相对行的关键字值（随line-height变化）
top
- 使元素及其后代元素的顶部与整行的line-height顶部对齐。
bottom
- 使元素及其后代元素的底部与整行的line-height底部对齐。
相对父元素的关键字值（不随line-height值变化）
baseline（默认）
- 使元素的基线与父元素的基线对齐。
- HTML规范没有详细说明部分可替换元素（img等）的基线，这意味着这些元素使用此值的表现因浏览器而异。
sub
- 使元素的基线与父元素的下标基线对齐。
super
- 使元素的基线与父元素的上标基线对齐。
text-top
- 使元素的顶部与父元素的字体顶部对齐。
text-bottom
- 使元素的底部与父元素的字体底部对齐。
middle
-
使元素的中部与父元素的基线加上父元素x-height（小写字符x的高度）的一半对齐
- x-height为字体中小写 x 的高度（x-line到基线的距离）
-
middle中线位置(字符x的中心)并不是字符内容的绝对居中位置
-
效果并不是完全的垂直居中，只是近似，line box的垂直中心是字符content area的中心，比如对于字符x而言，middle位置比绝对中心位置要靠下（middle是基线加上x-height的一半）
-
要想完全垂直居中，设置font-size:0，此时content area高度是0，基线位置就是中心点位置
-
长度值
- 通过距离升高（正值）或降低（负值）元素。
- ‘0cm’等同于’baseline’
百分值
- 通过距离（相对于line-height值的百分大小）升高（正值）或降低（负值）元素。
- '0%‘等同于’baseline’
- line-height: 30px; vertical-align: -10%; 等于 line-height: 30px; vertical-align: -3px;
因为字体元素都有leading，所以line-height可能导致很奇怪的结果
