（8）CSS 基本视觉格式化——②“行内盒子”格式化

本知识学习用时：2小时，总第40/10000小时

前言：作为学习“基本视觉格式化”的第二篇，“行内盒子”格式化相对于“块盒子”格式化的知识点会更细、更分散。不过作为最基本的理论知识，这篇依然很重要。

一、“行内盒子”怎么来的

当元素的 display 属性为inline、inline-block或inline-table时，该元素将成为“行内级元素”。

这些元素不会在之前或之后生成“行分隔符”，它们是块级元素的后代。

显示时，它不会生成内容块，但是可以与其他行内级内容一起显示为多行。

同理，“行内级元素”会生成“行内级盒子”，该盒子同时会参与“行内格式化上下文（inline formatting context）”的创建。

二、“行内盒子”格式化

① 一些基本概念

匿名文本

未包含在行内元素的字符串（生活不像林黛玉 而风情万种）就叫“匿名文本”。

注意，空格也是匿名文本的一部分，因为空格与其他字符一样都是正常的字符。

非替换元素、替换元素

-- 非替换元素：

如果元素的内容包含在文档中，则称之为“非替换元素”。

例如：如果一个段落的文本内容都放在该元素的本身之内，这个段落就是一个“非替换元素”。

-- 替换元素：

指用作为其他内容占位符的一个元素。

例如：-- img 元素，它只是指向一个图像文件，这个图像文件将插入到文档流中该 img 元素本身所在的位置。

大多数“表单”元素也可以“替换”（如 ）。

内容区、行内框、间距

-- 内容区

非替换元素中，内容区可以是元素中各字符的 em 框串在一起构成的框（font-size 的值确定了各个 em 框的高度），也可以是由元素中字符字形描述的框;

替换元素中，内容区就是元素的固有高度再加上可能有的 margin、边框或 padding。

-- 行间距

行间距是 font-size 与 line-height 的差值，被分成两半在内容区的上下（上下半间距）。

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

-- 行内框

非替换元素，行内框高度= line-height ；

替换元素，行内框高度=内容区宽度（因为行间距不应用到替换元素）。

-- 行高

两行文字“基线”的距离。

-- 行框

一行有很多“行内框”，“行框”是包含该行中出现的“行内框”的最高点和最低点的最小框。

换句话说，“行框”的上边界要位于最高“行内框”的上边界，而“行框”的底边要放在最低“行内框”的下边界。

-- 基线

不同元素的“基线”位置不同，整个“行框”会有一个“基线”，行内元素的位置是基于两者“基线”对齐。

② “行内盒子”格式化——核心：确定“行框”的高度

-- 首先，以下步骤确定行中各元素“行内框”的高度：

第一，得到各行内“非替换元素”及不属于后代行内元素的所有文本的 font-size 值和 line-height 值，再将 line-height 减去 font-size，这就得到了框的“行间距”。这个“行间距”除以 2，将其一半分别应用到 “em 框”的顶部和底部。

-- 其次，对于各内容区，确定它在整行“基线”的上方和下方分别超出多少：

这个任务并不容易：你必须知道各元素及匿名文本各部分的“基线”的位置， 还要知道该行本身“基线”的位置，然后把它们对齐。另外，对于替换元素，要将其底边放在整行的“基线”上。

-- 继而，对于指定了 vertical-align 值的元素，确定其垂直偏移量：

由此可知该元素的“行内框”要向上或向下移动多远，并改变元素在“基线”上方或下方超出的距离。

-- 最后，既然已经知道了所有“行内框”会放在哪里，再来计算最后的“行框”高度：

为此，只需将“基线”与最高“行内框”顶端之间的距离加上“基线”与最低“行内框”底端之间的距离。

后记：之所以在这里打住没往下写，主要是考虑到上篇和这篇的理论知识实在是太多。且后续的文章（如“CSS 给链接加样式”、“CSS 给表单加样式”等）将会着重涉及“行内盒子”在实例中的运用，届时我们将会用代码来阐述基础理论，眼下不作过多赘述。

记住一点：理论不懂就实践，实践不会就学理论！

欢迎继续关注下文 ：

（9）CSS 单纯给“盒子”加样式——padding、border、margin

（本文版权归 “公号 | Oli的前端一万小时” 所有，转载需说明来源）