CSS：内联格式上下文
内联格式上下文的基本概念
行框
行框就是包含该行所有内联级内容的矩形区域，每一行会生成一个行框。在这些行框的外边又存在一个行框，这个行框由块元素生成用于包含所有的行框，称之为根行框。
基线
基线是沿着文本的单个字形对齐的行框的内联轴的线。基线指导字体中字形的设计（例如，大多数字母字形的底部通常与字母基线对齐），它们指导排版时不同字体或字体大小的字形对齐。
基线表
构造良好的字体包含基线表，该表指示字体设计坐标空间中一个或多个基线的位置。
文本度量
基于文本的度量有以下这些值，这些值被用于指定基线：
- alphabetic：用于书写拉丁语、西里尔语、希腊语和许多其他文字，对应于大多数（但不是所有）字符的底部（如“m”、“Ш”、“Δ”）。
- cap-height：对应于拉丁语、西里尔语、希腊语等大写字母（如“T”、“Б”、“∑”）的顶部。
- x-height：对应于拉丁语、西里尔语、希腊语等小写字母（如“m”、“л”、“α”）的顶部。
- x-middle：对应于字母和x高度基线之间的中间位置。
- ideographic-over：对应于CJK（汉文/朝鲜文/假名）文本设计边缘上的线条。
- ideographic-under：对应于CJK（汉文/朝鲜文/假名）文本设计边缘下的线条。
- central：对应于表意文字中心基线，位于基线下方表意文字和基线上方表意文字之间的中间位置。
- ideographic-ink-over：对应于CJK（汉文/朝鲜文/假名）文本墨水边上的线条。
- 对应于CJK（汉文/朝鲜文/假名）文本墨水边下的行。
- hanging：与悬挂基线相对应，藏文和类似的一院式剧本中的人物似乎“悬挂”在悬挂基线上，具有强烈但并非绝对的顶部边缘。
- math：对应于围绕其设计数学字符的中心基线。
- text-over：对应于内联内容框边缘上的行的度量。
- text-under：对应于内联内容框边缘下的行的度量。
- em-over：对应于一个标准化的概念上升，以确保他们上方和下方之间的距离为1米。
- em-under：对应于标准化的概念下降，以确保em over和em under之间的距离为1米。
基线集
假设每个字体、字形和内联级别框都具有每个基线类型的基线坐标，指示该基线在其块轴上的位置。这组基线称为其基线集。
此集合中用于在其对齐上下文中对齐方框或字形的基线称为其对齐基线；用于调整其内容的基线称为其主导基线。
对于单个字形，基线集来自字体的基线表。对于内联框，它从其第一个可用字体派生，而不管该框是否实际包含该字体的任何字形。
对于其他框，其基线集名义上是根据基线源和其参与的格式化上下文的规则从其内容派生的。
内联格式上下文的创建
任何直接包含内联级元素或文本的块容器都会创建内联格式化上下文，创建方式是将文本和内联级别的文本框分割成一堆行框，这样就可以在块容器中形成一个内联格式上下文。
在内联格式上下文中使用内容布局模式布局内联内容，独立地调整和定位每个内联级盒子和行框，
内联内容的包含块是块容器的内容块，由于块容器会创建一个根内联框，包含其所有内联级内容，也可以说内联内容的包容快是这个根内联框。根内联框继承自其父块容器，但在其他方面不可设置样式。
内联格式上下文的布局规则
在内联格式上下文中，内容沿内联轴排列。内联轴边距、边框和填充在内联级别框之间边距不会折叠。生成的矩形区域包含形成单行内联级别内容的框，称为行框（inline-box）。在每个行框中，内联级别框沿块轴彼此对齐，通常按其文本的基线对齐。
当一个内联框超过了一个行框的逻辑宽度，或者包含一个强制换行符时，它将被分割成多个片段，这些片段被分割成多行框。
行框在其块流方向上堆叠为块容器盒的直接内容物，并按照对齐方式在该容器内对齐。因此，内联格式上下文由一堆行框组成。行框堆叠时没有分离（除非另有规定，例如浮动间隙），并且它们从不重叠。
布局步骤：
-
计算行框中每个内联级别框的布局边界。
- 对于原子内联，如替换的元素和内联块：布局边界是它们的边距框。
- 对于根内联框，以及具有文本边缘的内联框：布局边界是从它们使用的行高度导出的，忽略任何边距/边框/填充。
- 对于其他内联框：布局边界从其文本边缘度量中导出的，并包括任何边距/边框/填充。
-
内联级别框根据主基线和垂直对齐在块轴上对齐。假设基线偏移的线相对值对齐，以最小化线框高度。
-
计算线框的逻辑高度，以精确包括其所有内联级别框的对齐布局边界。
-
根内联框的对齐子树和具有行框的框–相对垂直对齐值相对于行框对齐。
对齐规则
CSS假设每个字体都有字体度量，这些度量指定基线之上的特征高度（称为上升度量）和基线之下的特征深度（称为下降度量），CSS使用这些度量在内联格式上下文中布置文本和框。
更具体地说，通过定位其对齐基线以匹配其父对象的相应基线（即其对齐上下文），在块轴中对齐每个图示符或内联级别框，然后根据其对齐后偏移可能从该位置偏移。
对齐长方体时，将根据其对齐基线和基线源值选择对齐基线，并默认匹配父对象的主导基线。对于图示符，对齐基线始终由父对象的主导基线确定。
对于内联框，主导基线用于通过将每个字形/框的对应基线与框自身的主导基线对齐来对齐框的文本。对于其他框，主导基线指示在框的对齐上下文中参与基线对齐的任何框的默认对齐基线；
总的来说行框对齐的规则就是把内联级内容自身的指定基线与行框中与此对应名称的基线对齐从而实现定位文本的功能。不同内联内容的基线的选择不同。
为了能够统一主导基线的选择，可以使用dominant-baseline属性指定主导基线，该属性的取值如下：
- auto：当文本方向为横向时，相当于水平书写模式和垂直书写模式中的字母。当文本方向为混合或垂直时，相当于垂直书写模式中的中心。
- text-bottom：使用 text-under 基线。
- alphabetic：使用 alphabetic 基线。
- ideographic：使用 ideographic-under 基线
- middle：使用x-middle基线
- central：使用central基线
- mathematical：使用math基线
- hanging：使用hanging基线
- text-top：使用text-over基线
设置了主导基线，然后再使用vertical-align属性设置其他的选项，vertical-align是baseline-source、alignment-baseline、baseline-shift的简写形式。这三个属性分别设置基线源、对齐基线、对齐后基线偏移
base-line的取值如下：
- auto：为inline block指定最后一条基线对齐，为其他所有块指定第一条基线对齐。
- first：指定第一条基线对齐
- last：指定最后一条基线对齐
alignment-baseline取值如下：
- baseline：使用父项的主导基线选择
- alphabetic：使用alphabetic基线
- ideographic：使用ideographic-under基线
- middle：使用x-middle基线
- central：使用central基线
- mathematical：使用math基线
- text-top：使用text-over基线
baseline-shift取值如下：
- 长度值或百分比：升高（正值）或降低（负值）指定长度
- sub：降低父框下标的适当偏移量
- super：按适合于父框上标的偏移量升高
- top：将对齐子树的边缘上方的线与线框的边缘上方对齐。
- center：将对齐子树的中心与线框的中心对齐
- bottom：将对齐子树边缘下的线条与线框边缘下的线对齐。
长度值、百分比、sub、super这些值相对其基线对齐位置移动框，top、center、bottom相对于其线框的边界移动内联框及其内容。
内联格式上下文中行框的尺寸计算规则
行框的块轴大小取决于其内联级别内容的大小和对齐方式。此大小由line-height、text-edge、leading-trim和inline-sizing属性控制。
line-height属性指定框的首选线条高度，其取值为：
- normal：根据字体度量自动确定首选行高度
- 长度值
- 百分比：属性的首选行高和计算值是元素font-size的百分比的计算值。
- 数值：首选的行高度是这个数字乘以元素的font-size的计算值。负值是非法的。计算值与指定值相同。
内联框根据字体度量调整大小，text-edge用来控制其使用的文本度量：
- leading：使用上升/下降加上任何正半领先。为了调整行框的大小，将忽略边距/填充/边框。
- text：使用text-over或text-under基线
- cap：使用cap-height基线
- ex：使用x-height基线
- ideographic：使用ideographic-over基线
- ideographic-ink：使用ideographic-ink-over基线或ideographic-ink-under基线
- alphabetic：使用alphabetic基线
leading-trimg属性用于控制字形上方和下方的距离的大小保证行高一致或间距一致实现不同字形布局在相同位置的目的，其值如下：
- normal：当应用于块容器时，不对第一个/最后一个行框进行特殊处理。
- start：对于块容器：将第一个格式化行的块起始端修剪到其根内联框的相应text-edge的值。如果没有这样的行，或者中间有非零填充或边框，则没有效果。对于内联框：修剪框的块端侧，使其内容边缘与text-edge指定的度量相匹配
- end：对于块容器：将最后一个格式化行的块端侧修剪到其根内联框的相应text-edge的值。如果没有这样的行，或者中间有非零填充或边框，则没有效果。对于内联框：修剪框的块端侧，使其内容边缘与text-edge指定的度量相匹配
- both：指定同时开始start和end的行为
在内联框上，指定是否修剪内容框以匹配其对应的text-edge的值。
在块容器上，指定是否根据相应的text-edge的值修剪其内容开始/结束处的半前导，以更好地将框的内容边缘与其文本内容匹配。
inline-sizing用于执行测量内联框的高度的方式，其值如下：
- normal：内联框的内容区域的大小和位置适合（可能是假设的）第一个可用字体的文本。
- stretch：一旦调整了行框的大小并将其内容定位为normal，则会移动内嵌框的框边缘，使其上/下边距边缘与相应的线框边缘重合，从而拉伸内嵌框的内部逻辑高度，使其块轴外部大小填充线框。
行框的行左边缘接触其包含块的行左边，行右边缘接触其含有块的行右边缘，因此行框的逻辑宽度等于其包含块（即块容器的内容框）的内部逻辑宽度。浮动框或初始字母框可能位于包含块边缘和行框边缘之间，从而减少任何此类受影响的行框的可用空间，从而减少其逻辑宽度。
不包含文本、不保留空格、不包含具有非零边距、填充或边框的内联框以及不包含其他流内内容（如原子内联或ruby注释）且不以强制换行符结尾的行框必须被视为零高度行框。
首字母的设置
initial-letter属性指定所跨行数时的首字母的大小和下沉。其值如下：
- normal：没有特殊的效果
- 长度值：第一个参数根据首字母占据的行数定义首字母的大小。小于1的值无效。
- 整数：这个可选的第二个参数定义了首字母应该下沉的行数。值1表示首字母升高；大于1的值表示首字母下沉。小于1的值无效。
- raise：计算首字母下沉值为1。
- drop：计算一个等于初始字母大小的初始字母汇，并将其舍入为最接近的正整数。
initial-letter-align属性指定用于调整首字母大小和位置的对齐点。需要两组对齐点：首字母的上对齐点和下对齐点与根内联框的对应上对齐点匹配。其值如下：
- alphabetic：使用周围字母的cap-height和alphabetic基线对齐首字母
- ideographic：使用周围字母的ideographic-ink-over和ideographic-ink-under基线对齐首字母
- hanging：使用周围字母的hanging和ideographic基线对齐首字母
- leading：周围文本的上/下半前缘，即上升/下降+半前缘对齐首字母。
- border-box：将初始字母框的边框下边缘和边框上边缘分别用作上对齐点和下对齐点。
当initial-letter的值不为normal，会使受影响的框变成一个首字母框，这是一个具有特殊布局行为的内联级别框。首字母框分为非替换的内联框和原子内联框。
对于非原子的内联首字母，方框及其内容与它所在的行处于相同的内联格式上下文中，并且应用了许多特殊规则来给出预期的大小和对齐方式。
对于原子首字母，它要么是被替换的元素，要么为其内容建立独立的格式上下文，则框的大小（除了其在块轴上的自动大小之外）和框内内容的布局遵循通常的规则：它主要是框的特殊定位。
总结
| 样式名 | 描述 |
|---|---|
| dominant-baseline | 此属性指定主导基线，这是用于对齐框内内容的默认基线类型。 |
| vertical-align | 此速记属性通过在单个声明中指定其对齐基线类型（对齐基线）、基线对齐首选项（基线源）和对齐后偏移（基线偏移），指定内联级别框在行中的对齐方式。 |
| line-height | 此属性指定框的首选线条高度 |
| text-edge | 内联框（其主要目的是包含文本）根据其字体度量在块轴上调整大小。文本边缘属性控制使用的度量。 |
| leading-trim | leading-trim属性允许在块的第一行和最后一行的上方和下方修剪此附加空间，从而可以更精确地控制字形周围的间距。 |
| inline-sizing | 此属性指定如何相对于内联框的内容测量其内容区域的逻辑高度。 |
| initial-letter | 此属性指定所跨行数时的首字母的大小和下沉。 |
| initial-letter-align | 此属性指定用于调整首字母大小和位置的对齐点。 |