# CSS 内联元素

作者: 刘倩时间: 2020-12-22

# 1、字母 x 与 CSS 基线概念

在各种内联相关模型中，凡是涉及到垂直方向的排版或者对齐的，都离不开最最基本的基线(baseline)。

字母 x 的下边缘(线)就是我们的基线。

x-height, 指的是字母'x'的高度。术语描述就是基线base line和等分线mean line之间的距离

# 2、line-height 属性

line-height行高的定义就是两基线的间距
单位可以是 % ，px ，em ，也可以是无单位的。1 em 和 100% 效果相同。
有单位时，子元素继承了父元素计算得出的行距；无单位时继承了系数，子元素会分别计算各自行距。
行间距 = line-height - font-size 。如果 line-height 小于 font-size 的值，说明行间距为负，会导致后一行文本与前一行文本重叠。

# 3、vertical-align 属性

用来指定行内元素或表格元素的垂直对齐方式

说明：

设置元素内容的垂直对齐方式。

参数：

baseline：基线对齐；
sub：下标显示；
super：上标显示；
top：顶端对齐；
text-top：文本的顶端对齐；
middle：中部对齐；
bottom：底端对齐；
text-bottom：文本的底端对齐；
百分比和长度： CSS2，可为负数。

其中 middle 和 x-height 有关，

middle指的是基线往上 1/2 "x-height"高度，也可以理解为 x 的叉点高度。

# 4、line-height 与 vertical-align 关联关系

vertical-align的百分比值不是相对于字体大小或者其他什么属性计算的，而是相对于line-height计算的。

 {
  line-height: 30px;
  vertical-align: -10%;
}

1
2
3
4

实际上，等同于：

 {
  line-height: 30px;
  vertical-align: -3px; /* = 30px * -10% */
}

1
2
3
4

再看一个例子：

图片下方出现了空白，这是由于 img 元素的 vertical-align 属性默认为 baseline，baseline 意味着元素的基线通父元素的基线对齐，父元素的基线为字母 x 的下边缘(线)，但是像图片或者输入框这种元素，本身没有基线，则是将其底端通父元素的基线对齐。

这个空白距离是由 line-height 决定的，而 line-height 的默认值是 normal，我们经常将 normal 理解为 1，或者 1.2。line-height 的值为数字时，表示的相对于 font-size 的倍数，而 font-size 相同，font-family 不同，是会影响到 line-height 值的。

解决方法:

1. 让 vertical-align 失效

img {
  display: block;
}

1
2
3

2. 使用其他 vertical-align 值

取用其他属性值，比方说bottom/middle/top都是可以的

# 5、内联元素垂直居中实现

# 1. 让 line-height 与 height 相等

.container {
  width: 1rem;
  height: 1rem;
  line-height: 1rem;
  font-size: 0.12rem;
  color: green;
  background: lightblue;
}

1
2
3
4
5
6
7
8

# 2. 用 Flex 布局实现垂直+水平居中 (推荐)

.container {
  width: 1rem;
  height: 1rem;
  font-size: 0.12rem;
  color: green;
  background: lightblue;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

1
2
3
4
5
6
7
8
9
10

# 6、内联盒模型

内联盒指的是盒子内部的构建模型。

内联盒模型

1）内容区域（content area）：

内容区域，上面图片中并没有指示出来。他是一种围绕文字的看不见的盒子，张鑫旭将其理解为“可以把文本选中的背景色区域作为内容区域”。内容区域没有明确的定义，所以将其理解为 em 盒（em-box，可看成是中文字符占据的 1em 高度区域）。内容区域是一个模糊而又重要的概念是理解后面一系列内容的基础。

2）内联盒子（inline box）：分为内联盒子和匿名内联盒子。分别是蓝色部分和红色部分。

内联盒子不会让内容成块显示，而是拍成一行。

3）行框盒子（line box）：每一行就是一个行框盒子，如黄线部分

一旦给定的某一行已经生成了所有的行内框，行框的构造就会考虑这些行内框，是行框的高度足以包含最高行内框的顶端和最低行内框的底端；行框包含很多行内框；

4）包含盒子（containing box）：p 标签就是一个包含盒子。由一个个行框盒子构成。

# 7、“strut” 盒子及表现

“幽灵空白节点”是内联盒模型中非常重要的一个概念，具体指的是：在 HTML5 文档声明中，内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个“空白节点”一样。这个“空白节点”永远透明，不占据任何宽度，看不见也无法通过脚本获取，就好像幽灵一样，但又确确实实地存在，表现如同文本节点一样，因此，我称之为“幽灵空白节点”。

<!-- css: -->
<style>
  div {
    background-color: #cd0000;
  }
  span {
    display: inline-block;
  }
</style>

<!-- html:  -->
<div><span></span></div>
;

1
2
3
4
5
6
7
8
9
10
11
12
13

可见 div 有高度，但是样式未设置其高度，span 也未设置高度。

注意：在谷歌上看不到 strut 效果，在火狐上才能看到