视觉格式化模型

  • 版本网址缩略名: CSS/Visual_formatting_model
  • 版本标题: 视觉格式化模型
  • 版本 id: 468347
  • 创建于:
  • 创建者: yan
  • 是否是当前版本?
  • 评论

修订内容

CSS 视觉格式化模型 visual formatting model  是用来处理文档并将它显示在视觉媒体上的机制。这是 CSS 的一个基础概念。 视觉格式化模型根据 CSS 盒模型为文档的每个元素生成0,1或几个盒子。每个盒子的布局:

  • 盒子尺寸:指定或没有指定
  • 盒子类型:内联 inline, 内联级别 inline-level, 原子内联级别 atomic inline-level, 块block 盒子;
  • 定位方案 positioning scheme: 常规流,浮动或绝对定位;
  • 树中的其它元素: 它的子代与同代;
  • 视口 viewport 尺寸与位置;
  • 内含图片的固定尺寸;
  • 其它信息。

盒子的渲染相对于它的包含块 containing block  的边界。通常元素是它的后代元素的包含块。注意盒子并不受它的包含块的限制,当它的布局跑到包含块的外面时称为溢出 overflow

Note:  请查看规范对  包含块 containing block  的定义, 与 块容器盒子 block container box 概念不同。

盒子的生成 Box generation

CSS 视觉格式化模型的一部分工作是从文档元素生成盒子。生成内容不同于普通元素,有它自己的规则。盒子的类型取决于 CSS 属性 {{ cssxref("display") }} 

块级元素与块盒子Block-level elements and block boxes

当元素的 CSS 属性  {{ cssxref("display") }} 为 block, list-item 或 table 时,它是块级元素 block-level 。块级元素(比如<p>)视觉上呈现为块,竖直排列。

块级盒子参与 块格式化上下文 block formatting context。每个块级元素至少生成一个块级盒子,称为主要块级盒子 principal block-level box。 一些元素,比如<li>,另外生成一个盒子来放置项目符号。不过多数元素只生成一个主要块级盒子。 

主要块级盒子将包含后代元素以及生成内容生成的盒子。它也是可以使用 定位方案 positioning scheme 的盒子。

venn_blocks.png一个块级盒子可能也是一个块容器盒子。 块容器盒子 block container box 只包含其它块级盒子,或生成一个 内联格式化上下文 inline formatting context,因而只包含内联级盒子。注意块级盒子与块容器盒子概念不同。 前者描述元素跟它的父元素与兄弟元素之间的表现,后者描述元素跟它的后代之间的表现。一些块级盒子,比如表格,不是块容器盒子。相反,一些块容器盒子,比如非替换内联盒子及非替换表格单元格,不是块级容器。

同时是块容器盒子的块级盒子称为块盒子 block boxes。(译注:块级盒子与块盒子名字相近,注意分别^-^)

匿名块盒子 Anonymous block boxes

有时需要添加补充性盒子,这些盒子称为匿名盒子 anonymous boxes,  它们没有名字,不能被 CSS 选择符选中。

不能被 CSS 选择符选中意味着不能用样式表添加样式。这意味着所有继承的 CSS 属性值为 inherit ,所有非继承的 CSS 属性值为初始值 initial 。

块容器盒子只能包含内联级盒子,或者只能包含块级盒子。不过常常两者都包含。在这种情况下,将创建匿名块盒子来包含内联级盒子

拿下面的 HTML 代码来说 ( {{ HTMLElement("div") }} 与 {{ HTMLElement("p") }} 使用默认属性, display:block )

<div>Some inline text <p>followed by a paragraph</p> followed by more inline text.</div>

将创建两个匿名块盒子,一个包含 <p> 前面的文本 (Some inline text), 一个包含 <p> 后面的文本(followed by more inline text),  结构如下:

anonymous_block-level_boxes.png

结果:

Some inline text
followed by a paragraph
followed by more inline text.

和 {{ HTMLElement("p") }} 元素不同, 开发者不能控制这两个匿名盒子。对于可继承属性, 它们将取 {{ HTMLElement("div") }} 的属性值, 比如 {{ cssxref("color") }}。对于非继承属性,值为初始值 ,比如没有指定 {{ cssxref("background-color") }}, 值为初始值即 transparent,于是 <div> 背景可见。而 <p> 可以指定background-color 。类似的,这两个匿名盒子文本是一样的颜色。

另一种将创建匿名盒子的情况是,内联盒子包含了一个或几个块盒子。

如果内联盒子包含一个块盒子,它将在这个块盒子前后分成两个内联盒子,然后分别由两个匿名块盒子包含。

如果内联盒子包含几个块盒子,并且这些块盒子之间没有夹杂内容,将在这些块盒子前后创建匿名块盒子。

TBD: Describe example

内联级元素与内联盒子 Inline-level elements and inline boxes

当元素 CSS 属性 {{ cssxref("display") }} 为 inline, inline-block 或 inline-table.,它是内联级元素。视觉上它将内容与其它内联级元素排列为多行。典型的如段落内容,有文本,图片——内联级元素。

venn_inlines.png内联级元素生成内联级盒子 inline-level boxes ,参与生成 内联格式化上下文 inline formatting context。同时参与生成内联格式化上下文的内联级别盒子称为内联盒子 Inline boxes。所有display:inline 的非替换元素生成的盒子是内联盒子。而不参与生成内联格式化上下文的内联级盒子称为原子内联级盒子 atomic inline-level boxes。这些盒子由可替换内联元素,或 {{ cssxref("display") }} 值为 inline-block 或 inline-table 的元素生成,不能分成几个盒子(译注:多个行盒子)。

Note: 起初原子内联级盒子 atomic inline-level boxes 被称为原子内联盒子 atomic inline boxes. 这个比较遗憾,因为它们不是内联盒子。规范的勘误表修正了这个错误。 不管怎样,当在看到原子内联盒子时可以放心的当成原子内联级盒子,因为只是改了名字。
原子内联盒子在内联格式化上下文里不能分成多行。
<style>
  span {
    display:inline; /* default value*/
  }
</style>
<div style="width:20em;">
   span 里的文本 <span>可以
   分成多行因为</span>它是个内联盒子。
</div>

结果:

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

结果:

span 里的文本 
不能分成多行因为它
是个内联块盒子。

匿名内联盒子 Anonymous inline boxes

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

匿名内联盒子最常见的例子是块盒子包含文本,文本将包含在匿名内联盒子中。空白如果使用{{ cssxref("white-space") }} 去掉,则不会生成匿名内联盒子。

Example TBD

其它类型盒子

行盒子 Line boxes

行盒子Line boxes 由行内格式化上下文 inline formatting context 产生的行。在块盒子里面,行盒子从块盒子一边排版到另一边。 当有  浮动 floats 时, 行盒子从左浮动的最右边排版到右浮动的最左边。

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

插入盒子 Run-in boxes

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

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

Model-induced boxes

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

定位方案 Positioning schemes

一旦盒子生成了, CSS 引擎要指定它们的位置。相关机制::

  • 常规流 normal flow  盒子一个接一个排列
  • 浮动 floats 将盒子从常规流里提出来,放在当前盒子的旁边。
  • 绝对定位 absolute positioning scheme 盒子坐标是绝对的。绝对定位元素可以盖住使用其它定位方案的元素。

常规流 Normal flow

对于常规流 normal flow 盒子一个接着一个排列。在块级格式化上下文 block formatting context 里面, 它们竖着排列;在行内格式化上下文 inline formatting context 里面, 它们横着排列。 当 {{ cssxref("position") }} 为 static 或 relative,并且 {{ cssxref("float") }} 为 none 时为常规流。

在块级格式化上下文里面, 常规流竖着排列。

[image]

行内格式化上下文里面, 常规流横着排列。

[image]

常规流有两种情况:

  • 对于静态定位 static positioning, {{ cssxref("position") }} 值 为static , 盒子的位置是常规流布局里的位置。
    [image]
  • 对于相对定位 relative positioning,   {{ cssxref("position") }} 值 为 relative, 盒子偏移位置由这些属性定义 {{ cssxref("top") }}, {{ cssxref("bottom") }}, {{ cssxref("left") }} and {{ cssxref("right") }} 。即使有偏移,仍然保留原有的位置,其它常规流不能占用这个位置。

浮动 Floats

对于浮动定位方案 float positioning scheme, 盒子称为浮动盒子 floating boxes 。它位于当前行的开头或末尾。这导致常规流环绕在它的周边,除非设置 {{ cssxref("clear") }} 属性。

要使用浮动定位方案,元素 CSS 属性 {{ cssxref("position") }} 为 static 或 relative,然后  {{ cssxref("float") }} 不为 none 。如果 {{ cssxref("float") }} 设为 left, 浮动由行盒子的开头开始排列。如果设为 right, 浮动由行盒子的末尾开始排列。

[image]

绝对定位 Absolute positioning

对于绝对定位方案 absolute positioning scheme, 盒子脱离常规流,不影响常规流的布局。 它的定位相对于它的包含块,相关CSS属性: {{ cssxref("top") }}, {{ cssxref("bottom") }}, {{ cssxref("left") }} 及 {{ cssxref("right") }} 

如果元素的属性{{ cssxref("position") }}为 absolute 或 fixed, 它是绝对定位元素。

固定定位元素 fixed positioned element  也是绝对定位元素,它的包含块是视口。当页面滚动时它固定在屏幕上,因为视口没有移动。

 

修订版来源

<p>CSS 视觉格式化模型&nbsp;<em>visual formatting model</em>&nbsp; 是用来处理文档并将它显示在视觉媒体上的机制。这是 CSS 的一个基础概念。&nbsp;<span style="line-height: inherit;">视觉格式化模型根据 CSS 盒模型为文档的每个元素生成0,1或几个盒子。</span><span style="line-height: inherit;">每个盒子的布局:</span></p>
<ul>
  <li>盒子尺寸:指定或没有指定</li>
  <li>盒子类型:内联 inline, 内联级别 inline-level, 原子内联级别 atomic inline-level, 块block&nbsp;盒子;</li>
  <li><a href="/en-US/docs/CSS/Box_positioning_scheme" title="CSS/Box positioning scheme">定位方案 positioning scheme</a>: 常规流,浮动或绝对定位;</li>
  <li>树中的其它元素: 它的子代与同代;</li>
  <li><a href="/en-US/docs/CSS/viewport" title="CSS/viewport">视口 viewport</a>&nbsp;尺寸与位置;</li>
  <li>内含图片的固定尺寸;</li>
  <li>其它信息。</li>
</ul>
<p>盒子的渲染相对于它的包含块&nbsp;<em>containing block &nbsp;</em>的边界。通常元素是它的后代元素的包含块。注意盒子并不受它的包含块的限制,<span style="line-height: inherit;">当它的布局跑到包含块的外面时称为</span><span style="line-height: inherit;">溢出&nbsp;</span><em style="line-height: inherit;">overflow</em><span style="line-height: inherit;">。</span></p>
<div class="note">
  <strong>Note:</strong>&nbsp; 请查看规范对 &nbsp;<a href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details" title="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details">包含块</a>&nbsp;<em><a href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details" title="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details">containing block</a>&nbsp; </em>的定义, 与&nbsp;<a href="http://www.w3.org/TR/CSS2/visuren.html#block-boxes" title="http://www.w3.org/TR/CSS2/visuren.html#block-boxes">块容器盒子 <em>block container box</em></a>&nbsp;概念不同。</div>
<h2 id=".E7.9B.92.E5.AD.90.E7.9A.84.E7.94.9F.E6.88.90_Box_generation">盒子的生成 Box generation</h2>
<p><span style="line-height: inherit;">CSS 视觉格式化模型的一部分工作是从文档元素生成盒子。生成内容不同于普通元素,有它自己的规则。盒子的类型取决于 CSS 属性</span>&nbsp;{{ cssxref("display") }}&nbsp;</p>
<h3 id=".E5.9D.97.E7.BA.A7.E5.85.83.E7.B4.A0.E4.B8.8E.E5.9D.97.E7.9B.92.E5.AD.90Block-level_elements_and_block_boxes">块级元素与块盒子Block-level elements and block boxes</h3>
<p><span style="line-height: inherit;">当元素的 CSS 属性</span>&nbsp; {{ cssxref("display") }} 为&nbsp;<code>block</code>, <code>list-item</code>&nbsp;或&nbsp;<code>table 时,它是块级元素</code>&nbsp;<em style="line-height: inherit;">block-level</em><span style="line-height: inherit;">&nbsp;。块级元素(比如&lt;p&gt;)视觉上呈现为块,竖直排列。</span></p>
<p>块级盒子参与&nbsp;<a href="/en-US/docs/CSS/block_formatting_context" title="block formatting context">块格式化上下文 block formatting context</a>。每个块级元素至少生成一个块级盒子,称为主要块级盒子&nbsp;<em>principal block-level</em><em> box。</em>&nbsp;一些元素,比如&lt;li&gt;,另外生成一个盒子来放置项目符号。不过多数元素只生成一个主要块级盒子。&nbsp;</p>
<p>主要块级盒子将包含后代元素以及生成内容生成的盒子。它也是可以使用&nbsp;<a href="/en-US/docs/CSS/Positioning_scheme" title="CSS/Positioning scheme">定位方案 positioning scheme</a>&nbsp;的盒子。</p>
<p><img align="left" alt="venn_blocks.png" class="internal lwrap" data-pinit="registered" src="/@api/deki/files/5995/=venn_blocks.png" />一个块级盒子可能也是一个块容器盒子。 块容器盒子&nbsp;<em>block container box</em>&nbsp;只包含其它块级盒子,或生成一个&nbsp;<a href="/en-US/docs/CSS/Inline_formatting_context" title="CSS/Inline formatting context">内联格式化上下文 inline formatting context</a>,因而只包含内联级盒子。注意块级盒子与块容器盒子概念不同。&nbsp;前者描述元素跟它的父元素与兄弟元素之间的表现,后者描述元素跟它的后代之间的表现。一些块级盒子,比如表格,不是块容器盒子。相反,一些块容器盒子,比如非替换内联盒子及非替换表格单元格,不是块级容器。</p>
<p>同时是块容器盒子的块级盒子称为块盒子&nbsp;<em>block boxes。(</em>译注:块级盒子与块盒子名字相近,注意分别^-^)</p>
<h4 id=".E5.8C.BF.E5.90.8D.E5.9D.97.E7.9B.92.E5.AD.90_Anonymous_block_boxes" style="clear:left;">匿名块盒子 Anonymous block boxes</h4>
<p>有时需要添加补充性盒子,这些盒子称为匿名盒子&nbsp;<em>anonymous boxes</em>, &nbsp;它们没有名字,不能被 CSS 选择符选中。</p>
<p><span style="line-height: inherit;">不能被 CSS 选择符选中意味着不能用样式表添加样式。这意味着所有继承的 CSS 属性值为</span>&nbsp;<code>inherit</code>&nbsp;,所有非继承的 CSS 属性值为初始值&nbsp;<code>initial 。</code></p>
<p>块容器盒子只能包含内联级盒子,或者只能包含块级盒子。不过常常两者都包含。在这种情况下,将创建<span style="line-height: inherit;">匿名块盒子来包含</span><span style="line-height: inherit;">内联级盒子</span><span style="line-height: inherit;">。</span></p>
<div class="note">
  拿下面的 HTML 代码来说 ( {{ HTMLElement("div") }} 与 {{ HTMLElement("p") }} 使用默认属性,<span style="line-height: 1.5em;">&nbsp;</span><code style="font-size: 14px;">display:block</code><span style="line-height: 1.5em;">&nbsp;)</span></div>
<div class="note">
  <br />
  <code>&lt;div&gt;Some inline text &lt;p&gt;followed by a paragraph&lt;/p&gt; followed by more inline text.&lt;/div&gt;</code><br />
  <br />
  将创建两个匿名块盒子,一个包含 &lt;p&gt; 前面的文本 (<code>Some inline text</code>), 一个包含 &lt;p&gt; 后面的文本<span style="line-height: 1.5em;">(</span><code style="font-size: 14px;">followed by more inline text</code><span style="line-height: 1.5em;">), &nbsp;结构如下:</span></div>
<div class="note">
  <br />
  <p style="text-align:center;"><img alt="anonymous_block-level_boxes.png" class="internal default" data-pinit="registered" src="/@api/deki/files/5996/=anonymous_block-level_boxes.png" style="" /></p>
  <p>结果:</p>
  <pre>
Some inline text
followed by a paragraph
followed by more inline text.
</pre>
  <p>和 {{ HTMLElement("p") }} 元素不同, 开发者不能控制这两个匿名盒子。对于可继承属性, 它们将取 {{ HTMLElement("div") }} 的属性值, 比如 {{ cssxref("color") }}。对于非继承属性,值为初始值&nbsp;,比如没有指定 {{ cssxref("background-color") }}, 值为初始值即 transparent,于是&nbsp;<code>&lt;div&gt;</code>&nbsp;背景可见。而&nbsp;<code style="font-size: 14px;">&lt;p&gt;</code><span style="line-height: 1.5em;">&nbsp;</span><span style="line-height: 1.5em;">可以指定</span><span style="line-height: 1.5em;">background-color</span><span style="line-height: 1.5em;">&nbsp;。类似的,这两个匿名盒子文本是一样的颜色。</span></p>
</div>
<p>另一种将创建匿名盒子的情况是,内联盒子包含了一个或几个块盒子。</p>
<p>如果<span style="line-height: inherit;">内联盒子</span><span style="line-height: inherit;">包含一个块盒子,它将在这个块盒子前后分成两个内联盒子,然后分别由两个匿名块盒子包含。</span></p>
<p><span style="line-height: inherit;">如果</span><span style="line-height: inherit;">内联盒子</span><span style="line-height: inherit;">包含几个块盒子,并且这些块盒子之间没有夹杂内容,将在这些块盒子前后创建匿名块盒子。</span></p>
<div class="note">
  TBD: Describe example</div>
<h3 class="note" id=".E5.86.85.E8.81.94.E7.BA.A7.E5.85.83.E7.B4.A0.E4.B8.8E.E5.86.85.E8.81.94.E7.9B.92.E5.AD.90_Inline-level_elements_and_inline_boxes">内联级元素与内联盒子 Inline-level elements and inline boxes</h3>
<p>当元素 CSS 属性&nbsp;{{ cssxref("display") }} 为&nbsp;<code>inline</code>, <code>inline-block</code>&nbsp;或&nbsp;<code>inline-table</code>.,它是内联级元素。视觉上它将内容与其它内联级元素排列为多行。典型的如段落内容,有文本,图片——内联级元素。</p>
<p><img align="left" alt="venn_inlines.png" class="internal lwrap" data-pinit="registered" src="/@api/deki/files/6008/=venn_inlines.png" style="" />内联级元素生成内联级盒子&nbsp;<em>inline-level boxes</em>&nbsp;,参与生成&nbsp;<a href="/en-US/docs/CSS/Inline_formatting_context" title="CSS/Inline formatting context">内联格式化上下文 inline formatting context</a>。同时参与生成内联格式化上下文的内联级别盒子称为内联盒子<span style="line-height: inherit;">&nbsp;</span><em style="line-height: inherit;">Inline boxes。</em><span style="line-height: inherit;">所有</span><code style="font-size: 14px; line-height: inherit;">display:inline 的非替换元素生成的盒子是内联盒子。而</code><span style="line-height: inherit;">不参与生成内联格式化上下文的内联级盒子称为原子内联级盒子&nbsp;</span><em style="line-height: inherit;">atomic inline-level boxes。</em><span style="line-height: inherit;">这些盒子由可替换内联元素,或&nbsp;{{ cssxref("display") }} 值为&nbsp;</span><code style="font-size: 14px; line-height: inherit;">inline-block</code><span style="line-height: inherit;">&nbsp;或&nbsp;</span><code style="font-size: 14px; line-height: inherit;">inline-table 的元素生成,不能分成几个盒子(译注:多个行盒子)。</code></p>
<div class="note">
  <strong>Note:</strong>&nbsp;起初原子内联级盒子 atomic inline-level boxes 被称为原子内联盒子 atomic inline boxes. 这个比较遗憾,因为它们不是内联盒子。规范的勘误表修正了这个错误。 不管怎样,当在看到原子内联盒子时可以放心的当成原子内联级盒子,因为只是改了名字。</div>
<div class="note" style="clear:left;">
  原子内联盒子在内联格式化上下文里<span style="line-height: 1.5em;">不能分成多行。</span></div>
<div class="note" style="clear:left;">
  <div style="-moz-column-width: 30em">
    <pre>
&lt;style&gt;
  span {
    display:inline; /* default value*/
  }
&lt;/style&gt;
&lt;div style="width:20em;"&gt;
   <span style="background-color: rgb(250, 249, 226); line-height: 21px;">span 里的文本</span> &lt;span&gt;<span style="background-color: rgb(250, 249, 226); line-height: 21px;">可以
</span><span style="background-color: rgb(250, 249, 226); line-height: 21px;">   分成多行因为</span>&lt;/span&gt;<span style="background-color: rgb(250, 249, 226); line-height: 21px;">它是个</span><span style="background-color: rgb(250, 249, 226); line-height: 21px;">内联盒子。</span>
&lt;/div&gt;
</pre>
    <p>结果:</p>
    <div style="width: 20em;">
      span 里的文本可以</div>
    <div style="width: 20em;">
      <span style="display: inline-block;">分成多行因为它是个</span></div>
    <div style="width: 20em;">
      <span style="display: inline-block;">内联盒子。</span></div>
    <pre>
&lt;style&gt;
  span {
    display:inline-block;
  }
&lt;/style&gt;
&lt;div style="width:20em;"&gt;
   <span style="line-height: 21px; background-color: rgb(250, 249, 226);">span 里的文本</span> &lt;span&gt;<span style="line-height: 21px; background-color: rgb(250, 249, 226);">不能分成多行
   因为它</span>&lt;/span&gt; 是个内联块盒子。
&lt;/div&gt;
</pre>
    <p>结果:</p>
    <div style="width:20em;">
      span 里的文本&nbsp;</div>
    <div style="width:20em;">
      <span style="display:inline-block;">不能分成多行因为它</span></div>
    <div style="width:20em;">
      是个内联块盒子。</div>
  </div>
</div>
<h4 id=".E5.8C.BF.E5.90.8D.E5.86.85.E8.81.94.E7.9B.92.E5.AD.90_Anonymous_inline_boxes">匿名内联盒子 Anonymous inline boxes</h4>
<p>类似于块盒子,CSS 引擎有时自动生成内联盒子。这些盒子也是匿名的,因为它们没有对应的选择器名字。它们继承所有可继承的属性,非继承的属性取初始值。&nbsp;</p>
<p>匿名内联盒子最常见的例子是块盒子包含文本,文本将包含在匿名内联盒子中。空白如果使用<span style="line-height: inherit;">{{ cssxref("white-space") }} 去掉,则</span><span style="line-height: inherit;">不会生成匿名内联盒子。</span></p>
<div class="note">
  Example TBD</div>
<h3 class="note" id=".E5.85.B6.E5.AE.83.E7.B1.BB.E5.9E.8B.E7.9B.92.E5.AD.90">其它类型盒子</h3>
<h4 id=".E8.A1.8C.E7.9B.92.E5.AD.90_Line_boxes">行盒子 Line boxes</h4>
<p>行盒子<em>Line boxes</em>&nbsp;由行内格式化上下文&nbsp;<a href="/en-US/docs/CSS/Inline_formatting_context" title="block formatting context">inline formatting context</a>&nbsp;产生的行。在块盒子里面,行盒子从块盒子一边排版到另一边。 当有 &nbsp;<a href="/en-US/docs/CSS/float" title="float">浮动 floats</a>&nbsp;时, 行盒子从左浮动的最右边排版到右浮动的最左边。</p>
<p>行盒子是技术上的实现,开发者通常不用操心它。</p>
<h4 id=".E6.8F.92.E5.85.A5.E7.9B.92.E5.AD.90_Run-in_boxes">插入盒子 Run-in boxes</h4>
<p>插入盒子&nbsp;<em>Run-in boxes,</em>由&nbsp;&nbsp;<code>display:run-in 定义,由后续盒子的类型决定是块盒子还是行盒子。可以用来在第一个段落中插入标题。</code></p>
<div class="note">
  <strong>Note:</strong>&nbsp;插入盒子 Run-in boxes 从 CSS 2.1 标准中移除了,因为可操作的实现定义不足。 可能 CSS3 会引入,但是这是实验性质,不能用于生产环境。&nbsp;</div>
<h4 class="note" id="Model-induced_boxes">Model-induced boxes</h4>
<p>除了行内及块上下文, CSS 允许元素有更多的内容模型。这些增加的模型是为了描述特定的布局,可能会定义新的盒子类型:</p>
<ul>
  <li><a href="/en-US/docs/CSS/table-layout" title="table-layout">表格内容模块 table content model</a>&nbsp;可以创建一个表格包装盒子&nbsp;<em>table wrapper box</em>&nbsp;及表格盒子&nbsp;<em>table box</em>, 也可以创建特殊盒子,比如标题盒子&nbsp;<em>caption boxes</em>.</li>
  <li><a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="Using CSS multi-column layouts">多列内容模型 multi-column content model</a>&nbsp;可以在容器盒子与内容之间创建列盒子&nbsp;<em>column boxes</em></li>
  <li>实验性的栅格,弹性盒 内容模型也创建新的盒子类型。</li>
</ul>
<h2 class="note" id=".E5.AE.9A.E4.BD.8D.E6.96.B9.E6.A1.88_Positioning_schemes">定位方案 Positioning schemes</h2>
<p>一旦盒子生成了, CSS 引擎要指定它们的位置。相关机制::</p>
<ul>
  <li>常规流&nbsp;<em>normal flow</em>&nbsp; 盒子一个接一个排列</li>
  <li>浮动&nbsp;<em>floats</em>&nbsp;将盒子从常规流里提出来,放在当前盒子的旁边。</li>
  <li>绝对定位&nbsp;<em>absolute positioning</em> scheme 盒子坐标是绝对的。绝对定位元素可以盖住使用其它定位方案的元素。</li>
</ul>
<h3 id=".E5.B8.B8.E8.A7.84.E6.B5.81_Normal_flow">常规流 Normal flow</h3>
<p>对于常规流&nbsp;<em>normal flow</em>&nbsp;盒子一个接着一个排列。在块级格式化上下文 block formatting context 里面, 它们竖着排列;在行内格式化上下文 inline formatting context 里面, 它们横着排列。 当 {{ cssxref("position") }} 为&nbsp;<code>static</code>&nbsp;或&nbsp;<code>relative,并且</code>&nbsp;{{ cssxref("float") }} 为&nbsp;<code>none 时为常规流。</code></p>
<div class="note">
  <span style="line-height: normal;">在块级格式化上下文里面, 常规流竖着排列。</span><br />
  <br />
  [image]<br />
  <br />
  <span style="line-height: normal;">行内格式化上下文里面,&nbsp;</span><span style="line-height: inherit;">常规流</span><span style="line-height: normal;">横着排列。</span></div>
<div class="note">
  <br />
  [image]</div>
<p class="note">常规流有两种情况:</p>
<ul>
  <li class="note">对于静态定位&nbsp;<em>static positioning</em>,&nbsp;{{ cssxref("position") }} 值 为<code>static</code>&nbsp;, 盒子的位置是常规流布局里的位置。<br />
    [image]</li>
  <li class="note">对于相对定位&nbsp;<em>relative</em><em> positioning</em>, &nbsp; {{ cssxref("position") }} 值 为&nbsp;<code style="font-size: 14px;">relative</code>, 盒子偏移位置由这些属性定义 {{ cssxref("top") }}, {{ cssxref("bottom") }}, {{ cssxref("left") }} and {{ cssxref("right") }} 。即使有偏移,仍然保留原有的位置,其它常规流不能占用这个位置。</li>
</ul>
<h3 id=".E6.B5.AE.E5.8A.A8_Floats">浮动 Floats</h3>
<p>对于浮动定位方案&nbsp;<em>float positioning scheme</em>, 盒子称为浮动盒子&nbsp;<em>floating boxes</em>&nbsp;。它位于当前行的开头或末尾。这导致常规流环绕在它的周边,除非设置&nbsp;{{ cssxref("clear") }} 属性。</p>
<p>要使用浮动定位方案,元素 CSS 属性&nbsp;<span style="line-height: inherit;">{{ cssxref("position") }} 为&nbsp;</span><code style="font-size: 14px; line-height: inherit;">static</code><span style="line-height: inherit;">&nbsp;或&nbsp;</span><code style="font-size: 14px; line-height: inherit;">relative,然后</code><span style="line-height: inherit;">&nbsp; {{ cssxref("float") }} 不为&nbsp;</span><code style="font-size: 14px; line-height: inherit;">none</code><span style="line-height: inherit;">&nbsp;。如果</span><span style="line-height: inherit;">&nbsp;{{ cssxref("float") }} 设为&nbsp;</span><code style="font-size: 14px; line-height: inherit;">left</code><span style="line-height: inherit;">, 浮动由行盒子的开头开始排列。如果设为&nbsp;</span><code style="font-size: 14px; line-height: inherit;">right</code><span style="line-height: inherit;">, 浮动由行盒子的末尾开始排列。</span></p>
<p>[image]</p>
<h3 id=".E7.BB.9D.E5.AF.B9.E5.AE.9A.E4.BD.8D_Absolute_positioning">绝对定位 Absolute positioning</h3>
<p>对于绝对定位方案&nbsp;<em>absolute positioning scheme, </em>盒子脱离常规流,不影响常规流的布局。&nbsp;它的定位相对于它的包含块,相关CSS属性: {{ cssxref("top") }}, {{ cssxref("bottom") }}, {{ cssxref("left") }} 及 {{ cssxref("right") }}&nbsp;</p>
<p>如果元素的属性{{ cssxref("position") }}为&nbsp;<code>absolute</code>&nbsp;或&nbsp;<code>fixed, 它是绝对定位元素。</code></p>
<p>固定定位元素&nbsp;<em>fixed positioned element</em>&nbsp; 也是绝对定位元素,它的包含块是视口。当页面滚动时它固定在屏幕上,因为视口没有移动。</p>
<div>
  &nbsp;</div>
恢复到这个版本