
注意:起初原子行内级盒(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 允许元素有更多的内容模型。这些增加的模型是为了描述特定的布局,可能会定义新的盒类型:










