venn_blocks.png一个块级盒可能也是一个块容器盒。块容器盒(block container box) 只包含其它块级盒，或生成一个行内格式化上下文(inline formatting context)，由此只包含行内盒。注意块级盒与块容器盒概念不同。 前者描述元素跟它的父元素与兄弟元素之间的表现，后者描述元素跟它的后代之间的影响。有些块级盒，比如表格，不是块容器盒。相反，一些块容器盒，比如非替换行内块及非替换表格单元格，不是块级盒。
与
使用默认属性 display:block )
XML/HTML Code复制内容到剪贴板
Some inline text
followed by a paragraph
followed by more inline text.
将创建两个匿名块盒，一个包含
前面的文本 (Some inline text)， 一个包含
后面的文本(followed by more inline text), 结构如下:
结果:
代码如下:
Some inline text
followed by a paragraph
followed by more inline text.
和
元素不同, 开发者不能控制这两个匿名盒。对于可继承属性， 它们将取
的属性值, 比如 color。对于非继承属性，值为初始值 ，比如没有指定 background-color, 值为初始值即 transparent，于是
背景可见。而
可以指定 background-color 。类似的，这两个匿名盒文本是一样的颜色。
另一种将创建匿名块盒的情况是，一个行内盒包含了一个或几个块盒。在这种情况下，包含块盒的盒将拆分为两个行内盒放置于块盒前后，然后分别由两个匿名块盒包含。这样块盒就与两个包含行内元素的匿名块盒形成了兄弟关系。
如果行内盒包含多个块盒，并且这些块盒之间没有夹杂内容，将在这些块盒前后创建匿名块盒。
行内级元素与行内盒(Inline-level elements and inline boxes)
当元素的 CSS 属性 display 的计算值为 inline, inline-block 或 inline-table 时，称它为行内级元素。视觉上它将内容与其它行内级元素排列为多行。典型的如段落内容，有文本(可以有多种格式譬如着重)，或图片，都是行内级元素。
行内级元素生成行内级盒(inline-level boxes)，参与行内格式化上下文(inline formatting context)。同时参与生成行内格式化上下文的行内级盒称为行内盒(Inline boxes)。所有display:inline 的非替换元素生成的盒是行内盒。而不参与生成行内格式化上下文的行内级盒称为原子行内级盒(atomic inline-level boxes)。这些盒由可替换行内元素，或 display 值为 inline-block 或 inline-table 的元素生成，不能拆分成多个盒。
注意：起初原子行内级盒(atomic inline-level boxes)被称为原子行内盒(atomic inline boxes)。很不幸，它们并非行内盒。规范的勘误表修正了这个错误。 不管怎样，当再看到原子行内盒时可以放心的当成原子行内级盒，因为只是改了名字。
原子行内盒在行内格式化上下文里不能分成多行。
CSS Code复制内容到剪贴板
span 里的文本 可以
分成多行因为它是个行内盒。
结果:
代码如下:
span 里的文本可以
分成多行因为它是个
行内盒。
CSS Code复制内容到剪贴板
span 里的文本 不能分成多行
因为它 是个行内块盒。
结果:
代码如下:
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 允许元素有更多的内容模型。这些增加的模型是为了描述特定的布局，可能会定义新的盒类型:
（1）表格内容模型(table content model)可以创建一个表格包装盒(table wrapper box)及表格盒(table box), 也可以创建特殊盒，比如标题盒(caption boxes)。
（2）多列内容模型(multi-column content model)可以在容器盒与内容之间创建列盒(column boxes)。
（3）实验性的栅格，弹性盒内容模型也创建新的盒类型。
（4）定位方案(Positioning schemes)EDIT
一旦盒生成了， CSS 引擎要指定它们的位置。会用到下列之一的方案：
（1）常规流(normal flow)盒一个接一个排列。
（2）浮动(floats)方案将盒从常规流里提出来，放在当前盒的旁边。
（3）绝对定位(absolute positioning)中的盒坐标是绝对的。绝对定位元素可以盖住使用其它定位方案的元素。
常规流(Normal flow)
在常规流中，盒一个接着一个排列。在块级格式化上下文里面， 它们竖着排列；在行内格式化上下文里面， 它们横着排列。 当 position 为 static 或 relative，并且 float 为 none 时会触发常规流。
（1）在块级格式化上下文里面，常规流竖着排列。
（2）行内格式化上下文里面，常规流横着排列。
常规流分为两种情况：
（1）对于静态定位(static positioning),position 值 为 static ,盒的位置是常规流布局里的位置。
（2）对于相对定位(relative positioning),position 值 为 relative, 盒偏移位置由这些属性定义 top, bottom, left and right 。即使有偏移，仍然保留原有的位置，其它常规流不能占用这个位置。
浮动(Floats)
对于浮动定位方案(float positioning scheme), 盒称为浮动盒(floating boxes)。它位于当前行的开头或末尾。这导致常规流环绕在它的周边，除非设置 clear 属性。
要使用浮动定位方案，元素 CSS 属性 position 为 static 或 relative，然后 float 不为 none 。如果 float 设为 left, 浮动由行盒的开头开始定位。如果设为 right, 浮动定位在行盒的末尾。
绝对定位(Absolute positioning)
对于绝对定位方案， 盒从常规流中被移除，不影响常规流的布局。 它的定位相对于它的包含块，相关CSS属性： top, bottom, left 及 right 。
如果元素的属性position为 absolute 或 fixed， 它是绝对定位元素。
固定定位元素(fixed positioned element)也是绝对定位元素，它的包含块是视口。当页面滚动时它固定在屏幕上，因为视口没有移动。
看完上述内容，你们掌握如何使用CSS代码编写视觉格式化模型的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！
当前名称：如何使用CSS代码编写视觉格式化模型
本文URL：
http://www.cdkjz.cn/article/jpopij.html
