inline-block应用于哪个元素？ [英] To which element does inline-block apply?

问题描述

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

例如下面的代码：

  div {background：#eee;颜色：黑色; margin：10px;}。一个{display：inline-block;}  

 < div class =one>一个< / div>< div class =two> Two< / div>< div class =one> Three< / div> div class =one> Four< / div>  

我跑，看到的结果是：一个在一行（但换行），两个在新行（不换行），三和四在同一行（但不同于两个）。我无法解释。

blockquote>

§9.2.2内联级元素和内联框

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

§9.2.1块级元素和块框

是块元素的源文档，其被可视地格式化为块（例如，段落）。 显示的以下
值属性使一个元素块级别：
'block'，'list-item'和'table'。

/ em>是参与阻止格式设置上下文的框。每个块级元素生成一个主体
块级框，其包含后代框和生成的内容
，并且也是任何定位方案中涉及的框。

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

§9.2。 1.1匿名封锁框

在这样的文件中：

 < DIV> 
一些文字
< P>更多文字
< / DIV> 
  

（假设DIV和P都有'display：block' $ b似乎同时具有内嵌内容和块内容。为了使
更容易定义格式，我们假设在一些文本周围有一个匿名
块框。

^{以上示例的三个框}

此图显示了上面
示例的三个框，其中一个是匿名的。

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

在你的例子中，喜欢

I'm studying inline-block attribute and know that it helps elements on same row (instead on each row as normal). But I don't know how inline-block works.

Does inline-block element X will makes X same line with previous element or will make next element same line with X.

For example below code:

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>

I run and see the result is: one is on one line (but wrap), two is on new line (without wrap), and three and four on same line (but different with two). I cannot explain. Please tell me why they behave like this.

解决方案

From the spec

§9.2.2 Inline-level elements and inline boxes

Inline-level elements are those elements of the source document that do not form new blocks of content; the content is distributed in lines (e.g., emphasized pieces of text within a paragraph, inline images, etc.). The following values of the 'display' property make an element inline-level: 'inline', 'inline-table', and 'inline-block'. Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context.

§9.2.1 Block-level elements and block boxes

Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the 'display' property make an element block-level: 'block', 'list-item', and 'table'.

Block-level boxes are boxes that participate in a block formatting context. Each block-level element generates a principal block-level box that contains descendant boxes and generated content and is also the box involved in any positioning scheme.

When you mix block-level and inline-level boxes inside a block container box, then anonymous block boxes will be generated:

§9.2.1.1 Anonymous block boxes

In a document like this:

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

(and assuming the DIV and the P both have 'display: block'), the DIV appears to have both inline content and block content. To make it easier to define the formatting, we assume that there is an anonymous block box around "Some text".

^{Diagram showing the three boxes for the example above}

Diagram showing the three boxes, of which one is anonymous, for the example above.

In other words: if a block container box (such as that generated for the DIV above) has a block-level box inside it (such as the P above), then we force it to have only block-level boxes inside it.

In your example, it would be something like

这篇关于inline-block应用于哪个元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！