• 一、IFC
  • 1.1 基础知识
  • 1.2 渲染规则
• 二、辨析
• 三、行内元素相关术语和知识
  • 3.1 匿名文本
  • 3.2 em框
  • 3.3 内容区
  • 3.4 行间距
  • 3.5 行内框
  • 3.6 行框
  • 3.7 行内元素的一些特点
• 四、行内元素的高度
• 五、行内级元素垂直对齐方式

• 参考资料：
  • 深入理解CSS中的行高

一、IFC

1.1 基础知识

• 行内级元素（inline-level elements）：
  • 当元素的 CSS 属性 display 的计算值为 inline，nline-block，inline-table，inline-flex 或 inline-grid 时，它是行内级元素
  • 视觉上它将内容与其它行内级元素排列为一行，直到该行被占满然后换行。
  • 如段落内容，文本或图片，都是行内级元素。

1.2 渲染规则

• 当容器盒不包含任何块级盒时，就会创建一个IFC（行内格式化上下文）
• 在IFC环境中，是不能存在块级元素的，如果将块级元素插入到IFC中，那么IFC将会被破坏成BFC，而块级元素前的元素或文本和块级元素后的元素或文本将会各自产生一个匿名块盒将其包围
• IFC 中的行内级盒将会按照如下规则进行渲染（规则有点多，大概主要点就是行盒，折行机制，水平对齐方式，垂直高度及垂直对齐方式）：
  • 盒子一个接一个地水平摆放，当容器宽度不够时就会换行
  • 在水平方向上，这些盒的外边距、边框、内边距所占用的空间都会被计算，但行内盒的垂直的 border，padding 与 margin 都不会撑开行盒的高度
  • 在垂直方向上，这些盒可能会以不同形式来对齐，可通过 vertical-align 来设置，默认对齐为 baseline
  • 每一行将生成一个行盒（line box），包括该行所有的盒子，行盒的宽度是由包含块和存在的浮动来决定
  • 行盒一般左右边都贴紧其包含块，但是会因为浮动盒（float 元素）的存在而发生变化。浮动盒会位于包含块边缘与行盒边缘之间，这样行盒的可用宽度就小于包含块的宽度
  • 当所有盒的总宽度小于行盒的宽度，那么行盒中的水平方向排版由 text-align 属性来决定
  • 当所有盒的总宽度超过一个行盒时，就会形成多个行盒，多个行盒相互之间垂直方向不能分离，不能重叠
  • 当一个行内盒超过行盒的宽度时，它会被分割成多个盒，这些盒被分布在多个行盒里。如果一个行内盒不能被分割（比如只包含单个字符，或 word-breaking 机制被禁用，或该行内框受white-space属性值为nowrap或pre的影响），那么这个行内盒将溢出这个行盒
  • 当一个行内盒发生分割时，分割处的 margin, border 和 padding 不会有任何视觉效果（或者其他任何分裂，只要是有多个行盒）
  • 行盒的高度由内部元素中实际高度最高的元素计算出来。每个行盒的高度由于内容不一样，所以高度也可能不一样
  • 在一个行盒中，当他包含的内部容器的高度小于行盒的高度的时候，内部容器的垂直位置可由自己的 vertical-align 属性来确定

二、辨析

三、行内元素相关术语和知识

3.1 匿名文本

• 匿名文本(anonymous text)：指所有未包含在行内元素的字符串。
  • 例：<p>Hello<em>,lalal</em></p>，’Hello‘就是匿名文本
• 空格也是匿名文本的一部分，因为空格也是正常字符

3.2 em框

• em框在字体中定义，也称为字符框(character box)。实际的字型可能比其em框更高或更矮

3.3 内容区

• 在非替换元素中，内容区可能有两种：
  1. 内容区可以是元素中各字符的em框串在一起构成的框，也称为em框定义
  2. 内容区可以是由元素中字符字形描述的框
• 在替换元素中，内容区就是元素的固有高度 + margin + border + padding

3.4 行间距

• 行间距(leading)是font-siz的值和line-height值之差。
  • 这个差/2，即分成两半，分别应用到内容区的顶部和底部。
    • 内容区增加的这两部份也可称为半间距(half-leading)

• 行间距只应用于非替换元素

3.5 行内框

• 行内框通过向内容区增加行间距来描述。
• 非替换元素：元素行内框的高度始终 = line-height的值
• 替换元素：元素行内框的高度恰好 = 内容高度
  • 原因：行间距不应用到替换元素上

3.6 行框

• 包含改行中出现的行内框的最高点和最低点的最小框。
  • 行框的上边界要位于最高行内框的上边界
  • 行框的底边要放在最低行内框的下边界

3.7 行内元素的一些特点

1. 行内元素的background应用内容区及所有内边距
2. 行内元素的border包围内容区和所有内边距和边框
3. 非替换元素的padding、border、margin对行内元素无垂直效果
   • 即：它们垂直方向的值不会影响元素行内框的高

四、行内元素的高度

• 行盒的高度由其内容最高的一个决定。
• 如果是都是纯 inline 元素，则其高度由最高的 line-height 计算值决定；
• 而如果包括了 inline-block，则 inline-block 的 margin（上下），border（上下），padding（上下），height 都会影响整体行盒的高度

• demo

五、行内级元素垂直对齐方式

• 参考 demo