CSS代码编写中视觉格式化模型的学习教程

2020-05-07 06:40:17易采站长站整理

201631103849930.png (384×287)

注意:起初原子行内级盒(atomic inline-level boxes)被称为原子行内盒(atomic inline boxes)。很不幸,它们并非行内盒。规范的勘误表修正了这个错误。 不管怎样,当再看到原子行内盒时可以放心的当成原子行内级盒,因为只是改了名字。
原子行内盒在行内格式化上下文里不能分成多行。

CSS Code复制内容到剪贴板

<style>   
  span {   
    display:inline; /* default value*/  
  }   
</style>   
<div style="width:20em;">   
   span 里的文本 <span>可以   
   分成多行因为</span>它是个行内盒。   
</div>  

结果:

复制代码span 里的文本可以
分成多行因为它是个
行内盒。

CSS Code复制内容到剪贴板

<style>   
  span {   
    display:inline-block;   
  }   
</style>   
<div style="width:20em;">   
   span 里的文本 <span>不能分成多行   
   因为它</span> 是个行内块盒。   
</div>  

结果:

复制代码span 里的文本
不能分成多行因为它
是个行内块盒。
匿名行内盒(Anonymous inline boxes)

类似于块盒,CSS 引擎有时自动生成行内盒。这些盒也是匿名的,因为它们没有对应的选择器名字。它们继承所有可继承的属性,非继承的属性取 initial。

匿名行内盒最常见的例子是块盒直接包含文本,文本将包含在匿名行内盒中。空白如果使用white-space 去掉,则不会生成匿名行内盒。

行盒(Line boxes)

行盒由行内格式化上下文(inline formatting context)产生的盒,用于表示一行。在块盒里面,行盒从块盒一边排版到另一边。 当有浮动时, 行盒从左浮动的最右边排版到右浮动的最左边。

行盒是技术上的实现,开发者通常不用操心它。

插入盒(Run-in boxes)

插入盒,由  display:run-in 定义,由后续盒的类型决定是块盒还是行盒。可以用来在第一个段落中插入标题。

Note: 插入盒(Run-in boxes)从 CSS 2.1 标准中移除了,因为可操作的实现定义不足。 可能 CSS3 会引入,但是这是实验性质,不能用于生产环境。

除了行内及块格式化上下文, CSS 允许元素有更多的内容模型。这些增加的模型是为了描述特定的布局,可能会定义新的盒类型: