内联块适用于哪个元素？

Question

我正在研究inline-block属性，并知道它有助于同一行上的元素（而不是正常的每一行）。但我不知道inline-block是如何运作的。

div { background: #eee; color: black; margin: 10px; } .one { display: inline-block; }元素X是否会使X与前一个元素相同，或者使下一个元素与X相同。

例如下面的代码：

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

choco install vagrant

我跑，看到结果是：一个在一条线上（但是换行），两条在新线上（没有换行），三条和四条在同一条线上（但不同于两条）。我无法解释。请告诉我他们为什么会这样。

Answer 1

inline-block将元素放在一个行框上。这个线框的确切位置取决于周围元素以及容器的大小等。

块级元素将与任何行框垂直分开，除非它是浮动的（在这种情况下，如果有足够的空间，它将位于行框的旁边）。这是因为线框严格地是内联布局概念，并且在块布局中不存在，并且块级元素在正常流中垂直布局。这就是元素二是独立的原因。

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

不幸的是，我不知道任何描述块布局和内联布局之间相互作用的好参考。下一个最好的事情是section 9.4 of CSS2.1，它描述了正常流程，但作为技术规范，我怀疑大多数作者很难将其大部分文本与此示例相关联。

Answer 2

来自规范

  

§9.2.2 Inline-level elements and inline boxes

     

内联级元素是源文档中不构成新内容块的元素;内容按行分发   （例如，段落中强调的文本片段，内嵌图像，   等等。）。 'display'属性的以下值构成   element inline-level：'inline'，'inline-table'和'inline-block'。   内联级元素生成内联级框，即框   参与内联格式化上下文。

     

§9.2.1 Block-level elements and block boxes

     

块级元素是源文档中可视化为块（例如段落）的元素。下列   'display'属性的值构成元素块级别：   'block'，'list-item'和'table'。

     

块级框是参与block formatting context的框。每个块级元素都生成一个主体   块级框，包含后代框和生成的内容   并且也是任何定位方案所涉及的方框。

当您在块容器框中混合块级和内联级框时，将生成匿名块框：

  

§9.2.1.1 Anonymous block boxes

     

在这样的文件中：

     

<DIV>
  Some text
  <P>More text
</DIV>

     

（假设DIV和P都有'display：block'），DIV   似乎同时具有内联内容和块内容。为了做到这一点   更容易定义格式，我们假设有一个匿名   阻止框围绕“一些文字”。

     

     

^{图表显示了上面示例的三个框}

     

图表显示了三个框，其中一个是匿名的，用于   上面的例子。

     

换句话说：如果是一个块容器盒（例如生成的那个盒子）   上面的DIV）里面有一个块级盒子（比如上面的P），   然后我们强迫它里面只有块级框。

在您的示例中，它将类似于

Answer 3

默认情况下，

.two是块级元素。 div是display:inline-block唯一没有应用display:block的{​​{1}}，默认情况下{{1}}就是{{1}}。这就是它出现的原因。