从零基础到轻松就业 | CSS——CSS 基本视觉格式化：② “行内盒子”格式化（ Ⅱ ）

原创：itsOli  @前端一万小时

本文首发于公众号「前端一万小时」

本文版权归做者全部，未经受权，请勿转载！
复制代码

---

🔗紧接上篇文章

2.1.3 “文本行”基础概念——内容区、行内框/行内盒子、间距、行框

1. 内容区

• 非替换元素中，内容区能够是元素中各字符的 em 框串在一块儿构成的框（font-size 的值肯定了各个 em 框的高度），也能够是由元素中字符字形描述的框。换句话说，内容区的高度就是 font-size 的值。

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

2. 行间距

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

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

3. 行内框（即行内各个元素对应生成的“行内盒子”）

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

• 替换元素：
  ① “替换元素”不与文字结合（如 img 元素）：行内框高度 = 替换元素的固有高度再加上可能有的 margin、边框或 padding ；
  
  ② “替换元素”与文字结合（如 input 中 type=text 、 type=textarea 、 type=button 等与文字结合的表单元素）：若是字体行高大于“替换元素的固有高度再加上可能有的 margin、边框或 padding”，则“行内框”的高度为“行高”。不然就是“替换元素的固有高度再加上可能有的 margin、边框或 padding”。总之就是“谁大是谁”！

4. 行高

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

5. 行框（即文本整行对应生成的“行内盒子”）

一行有不少“行内盒子——inline box”，“行框”是包含该行中出现的“行内盒子”的最高点和最低点的最小盒子。

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

6. 基线

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

2.2 行内盒子格式化

要弄清“行内盒子格式化”，让咱们先充分理解关于“文本”的两个重要属性——line-height 和 vertical-align。

2.2.1 line-height

❗️line-height 只影响行内元素和其余行内内容，而不影响块级元素，至少不会直接影响块级元素。

❗️line-height 有继承性。

2.2.2 vertical-align

做为 line-height 的“断背”：vertical-align，这个属性只能用于“行内元素”和“替换”元素，且不能继承。

行内元素/替换元素 {
  vertical-align: 值;
}
复制代码

有如下“值”能够取：

• baseline
  元素基线与父元素的基线对齐。
  
  ❗️对于一些可替换元素，好比 type=textarea ， HTML 标准没有说明它的基线，这意味着对其使用这个关键字时，各浏览器表现可能不同。

• sub
  元素基线与父元素的下标基线对齐。

• super
  元素基线与父元素的上标基线对齐。

• text-top
  元素顶端与父元素字体的顶端对齐。

• text-bottom
  元素底端与父元素字体的底端对齐。

• middle
  元素中垂线与父元素的基线加上小写 x 一半的高度值对齐。

• length
  元素基线超过父元素的基线指定高度（能够取负值）。

• percentage
  同 length，百分比相对于 line-height——🤣这是证实他们俩是“断背”强有力的证据。

💡如下两个值是相对于整行文原本说的：

• top
  元素及其后代的顶端与整行的顶端对齐。

• bottom
  元素及其后代的底端与整行的底端对齐。

若是元素没有基线 baseline，则以它的外边距的下边缘为基线。

下一篇咱们继续讲解 CSS“行内盒子”格式化相关的知识点。

祝好，qdywxs ♥ you！