html - inline-block 适用于哪个元素？

Question

我正在研究 inline-block 属性并且知道它有助于同一行上的元素(而不是像往常一样在每一行上)。但是我不知道 inline-block 是如何工作的。

inline-block 元素 X 是使 X 与前一个元素在同一行还是使下一个元素与 X 在同一行。

例如下面的代码:

div {
    background: #eee;
    color: black;
    margin: 10px;
}

.one {
    display: inline-block;
}

<div class="one">One</div>
<div class="two">Two</div>
<div class="one">Three</div>
<div class="one">Four</div>

我运行并看到结果是:一个在一行上(但换行)，两个在新行上(不换行)，三个和四个在同一行上(但与两个不同)。我无法解释。请告诉我为什么他们会这样。

Answer 1

inline-block 将元素放在行框上。这个线盒具体在哪里渲染取决于周围的元素以及容器的大小。

block 级元素将与任何行框垂直分离，除非它是 float 的(在这种情况下，如果有足够的空间，它将位于行框旁边)。这是因为line boxes是严格意义上的内联布局概念，在block布局中是不存在的，block级元素在正常流中是垂直布局的。这就是元素二在其自己的行上的原因。

元素三和四没有 block 级元素分隔它们，因此将出现在元素二之后的同一个行框(除非它们需要换行)。在这方面，它们的行为很像短语中的两个单独的词。

不幸的是，我不知道有任何好的引用资料描述了 block 布局和内联布局之间的交互。下一个最好的是 section 9.4 of CSS2.1 ，它描述了正常的流程，但作为一个技术规范，我怀疑大多数作者很难将它的大部分文本与这个例子联系起来。