内联框与原子内联框之间的区别 [英] Difference between inline box and atomic inline box

问题描述

请考虑以下代码：

 < div>< / div> 
 
 div {
 display：inline-block; 
} 
  

div块是现在生成的原子内联框。正如规范中所述。 9.2.2

不是内联框的内联框（例如替换
内联级元素，内联块元素和内联表
元素）被称为原子内联级框，因为它们
作为单个不透明框参与其内联格式化上下文。

在这种情况下，'不透明'是什么意思？内联框是否作为透明框参与了内联格式化上下文？

所以我对原子内联框和内联框之间的区别感兴趣吗？

解决方案

从WC3 CSS2.1规范，章节 b
$ b

一个内联框是一个内联框，其内容
参与其包含的内联格式化上下文。 'display'值为'inline'的
非替换元素将生成
内联框

。

不是内联框的内联框（如
替换了内嵌级元素，内嵌块元素和
内联表元素）被称为原子内联级因为
他们作为一个不透明的
盒子参与他们的内联格式化上下文。

因此 $ b

• 元素包含 display：inline 生成行内框。


• 带有的元素display：inline-table | inline-block 和替换的内联级元素（如< img> ）生成行内级原子框。

至于你对 opaque 意味着什么的问题，@BoltClock解释它在这里一个很好的方式：

CSS Spec - 原子内联级别框

不透明表示该框是单数，如果它的文本
不能全部适合在一行中，那么
不能像行内框一样拆分。

---

这里有一些额外的细节，可能有助于

-level方块包含...

• ...其内容参与其内联格式化上下文
  
  
  
  
  • 这些称为内联boxe
  
  
  • 它们由具有的元素生成：display：inline
  
  
  • 注意单词 ...的内容参与其包含... 。这意味着这个内嵌级别框内的内联级别的子元素与父级内嵌的格式化上下文是相同的。这反过来又意味着如果有空白（空白），则单个子行内元素将分离并落入新行$ c>属性没有改变）。实际上，父级内嵌框会分成几个框。这里，父级内嵌框中的所有内联级元素存在于一个大快乐行内格式化上下文中。
  
  $ b
  • ...参与其内联格式化上下文作为单个不透明框
    
    
    
    
    • 它们被称为原子内联框
    
    
    • 它们由具有 display：inline-table的元素生成|内联块| inline-flex |内联网格
    
    
    • 不透明表示该框是一个单一的实体框
    
    
    • 结果是，框不能被拆分，即使其内部的行内框通常应该落在下一行
      
    • 相反，滚动条会出现
    
    
    • 这个原子内联级别框中的内容不参与相同的嵌入式格式化上下文作为其父
    
    
    / li>
    
  
  
  

  最后，如图所示，行内框是行内框的超集。

  
  
  

  希望可以帮助别人。

  
  

  Consider the following code:

  <div></div>
  
  div{
      display: inline-block;
  }
  

  div block is generated atomic inline-level box now. As said in spec. 9.2.2

  Inline-level boxes that are not inline boxes (such as replaced inline-level elements, inline-block elements, and inline-table elements) are called atomic inline-level boxes because they participate in their inline formatting context as a single opaque box.

  What does 'opaque' mean in this case? Is inline boxes participated in the inline formatting context as a transparent box?

  So I'm interested in what difference between atomic inline-level box and inline box?

  解决方案

  From the WC3 CSS2.1 Specification, Chapter 9 Visual formatting model:

  An inline box is one that is both inline-level and whose contents participate in its containing inline formatting context. A non-replaced element with a 'display' value of 'inline' generates an inline box.

  Inline-level boxes that are not inline boxes (such as replaced inline-level elements, inline-block elements, and inline-table elements) are called atomic inline-level boxes because they participate in their inline formatting context as a single opaque box.

  Therefore

  • Elements with display: inline generates inline boxes.
  • Elements with display: inline-table | inline-block and replaced inline-level elements (like <img>) generates inline-level atomic boxes.

  With regards to your question on what opaque means, @BoltClock explains it in a great way here:

  CSS Spec - Atomic Inline Level Boxes

  Opaque means that the box is a singular, solid unit, and that it cannot be split across lines like an inline box can when its text cannot all fit on a single line.

  ---

  And here is some additional detail from me, that might help

  Inline-level boxes includes boxes...

  • ...whose content participate in its containing inline formatting context
    • These are called inline boxes
    • They are generated by elements with display: inline
    • Note the words "...whose content participate in its containing...". This means that inline-level child elements inside this inline-level box, are in the same inline formatting context as the parent. This, in turn, means that the individual child inline-level elements will separate and fall to a new line if there is white space (and the white-space property is not changed). In effect, the parent inline box will split into several boxes. Here, all the inline-level elements inside the parent inline box, live in one big happy inline formatting context.
  • ...that participate in their inline formatting context as a single opaque box
    • These are called atomic inline-level boxes
    • They are generated by elements with display: inline-table | inline-block | inline-flex | inline-grid
    • Opaque means that the box is one single solid box
    • A consequence of that is that the box cannot be split, even if inline-level boxes inside it normally should fall to the next line
    • Instead, scrollbars would appear
    • Contents inside this atomic inline-level box does not participate in the same inline formatting context as its parent

  And finally, as seen, inline-level boxes is a super-set of inline boxes.

  Hope that helps someone in the future.

  这篇关于内联框与原子内联框之间的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！