由三个元素带来的 5 个冷门 CSS 知识点

上图

上代码

<style>
  .box {
    outline: solid thin black;
    width: fit-content;
  }

  .box div {
    display: inline-block;
    width: 50px;
    height: 50px;
    outline: solid thin black;
  }
</style>

<div class="box">
  <div></div>
  <div>&nbsp;</div>
</div>

进入正题

outline

outline 与 border 一样，用于绘制边框。但是它不占任何空间，不会像 border 那样计入盒模型中。
fit-content

该条目在 MDN 上标注为实验性的 API。作用为使元素的宽度表现类似于行内元素。
线框之间的空隙

线框之间的空隙并非凭空产生的。元凶在于代码中两个作为子元素的 div 间提了行。HTML 会将多个空格或者换行符合并为一个空格，所以这里夹在两个线框中间的实际上就是一个空格。

直接的解决方案是将两个 div 合并到一行。这种方案的缺点在于代码美化工具可能会自作主张把提行加回去，以及对强迫症不太友好。间接的解决思路是，既然这是由于字符导致的，那么将父元素的 font-size 设为 0 即可。缺点在于 font-size 是个默认会被继承的属性，如果在编辑子元素时忘了父元素设置过 font-size，那么就会因为“文字怎么不见了”而怀疑人生，尤其是嵌套了几层或者隔了一两天再回来改子元素时。
线框垂直错位

最后一条知识点，大概也是最重要的一条知识点。

首先将为了节目效果而使用的 nbsp; 换成字符 x。

这下就清晰很多了，原来左边的线框与右边的 x 进行了对齐。

这里涉及到了一条关于行内元素的对齐准则：默认以 baseline 作为对齐线。

以及关于 inline-block 元素的对齐规则：如果包含文字，那么按所包含的文字的基线对齐，否则按自身的下边缘对齐。

先来看看什么是基线：

上图中小写字母 v 的底部就在基线上。相应的，小写字母 x 的下边缘也应在基线上，所以右边的线框就会以该小写字母 x 的下边缘作为对齐基线。

左边的线框是个空的，所以按照自身的下边缘作为对齐基线。

最后二者进行对齐，左边的下边缘对齐右边文字 x 的下边缘，从而造成错位。
可能有人会有另一个疑问，为什么不是这样的（如下图）？

原因在于顺序是“先画出来，再对齐”。设想一下如果有一个高度为 50px 的 inline-block，里面有文字，那么文字是在左上吧？不会直接出现在左下角。所以在独立“渲染”完一个字符在左上角的 inline-block 后，它才会根据当前上下文进行对齐，此时它的“对齐线”就是内部字符的基线，也就是位于它自己的左上角偏下一点的位置，以这个基线进行对齐后自然也就会出现与它左边的 inline-block 错位的现象了。