内联框与原子内联框之间的区别

问题描述

请考虑以下代码：

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

div块是现在生成的原子内联框。正如

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

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

解决方案

从WC3 CSS2.1规范，章节

---

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

-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

  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:

  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

  ---

  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.

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