diff options
Diffstat (limited to 'files/zh-cn/web/css/visual_formatting_model/index.html')
| -rw-r--r-- | files/zh-cn/web/css/visual_formatting_model/index.html | 283 |
1 files changed, 283 insertions, 0 deletions
diff --git a/files/zh-cn/web/css/visual_formatting_model/index.html b/files/zh-cn/web/css/visual_formatting_model/index.html new file mode 100644 index 0000000000..bdf7bd11d6 --- /dev/null +++ b/files/zh-cn/web/css/visual_formatting_model/index.html @@ -0,0 +1,283 @@ +--- +title: 视觉格式化模型 +slug: Web/CSS/Visual_formatting_model +tags: + - CSS + - CSS盒模型 + - 参考 +translation_of: Web/CSS/Visual_formatting_model +original_slug: Web/Guide/CSS/Visual_formatting_model +--- +<p><span style="color: #4d4e53;">{{CSSRef}}</span></p> + +<p>CSS 视觉格式化模型（<em>visual formatting model）</em>是用来处理和在视觉媒体上显示文档时使用的计算规则。该模型是 CSS 的基础概念之一。</p> + +<div class="hidden"> +<p> </p> +</div> + +<p><span style="line-height: inherit;">视觉格式化模型会根据<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS盒子模型</a>将文档中的元素转换为一个个盒子，</span><span style="line-height: inherit;">每个盒子的布局由以下因素决定：</span></p> + +<ul> + <li>盒子的尺寸：精确指定、由约束条件指定或没有指定</li> + <li>盒子的类型：行内盒子（inline）、行内级盒子（inline-level）、原子行内级盒子（atomic inline-level）、块盒子（block）</li> + <li><a href="/zh-CN/docs/CSS/Box_positioning_scheme" title="CSS/Box positioning scheme">定位方案（positioning scheme）</a>：普通流定位、浮动定位或绝对定位</li> + <li>文档树中的其它元素：即当前盒子的子元素或兄弟元素</li> + <li>{{glossary("viewport", "视口")}}尺寸与位置</li> + <li>所包含的图片的尺寸</li> + <li>其他的某些外部因素</li> +</ul> + +<p>该模型会根据盒子的包含块（<em>containing block）的</em>边界来渲染盒子。通常，盒子会创建一个包含其后代元素的包含块，但是盒子并不由包含块所限制，<span style="line-height: inherit;">当盒子的布局跑到包含块的外面时称为</span><span style="line-height: inherit;">溢出（</span><em>overflow）</em><span style="line-height: inherit;">。</span></p> + +<div class="note"> +<p><span style="line-height: inherit;">译注：本文有很多相近的术语，阅读时需仔细，否则容易造成误解。为了方便读者，这里我将其整理一下。</span></p> + +<p> </p> + +<ul> + <li><strong>块</strong>：block，一个抽象的概念，一个块在文档流上占据一个独立的区域，块与块之间在垂直方向上按照顺序依次堆叠。</li> + <li><strong>包含块</strong>：containing block，包含其他盒子的块称为包含块。</li> + <li><strong>盒子</strong>：box，一个抽象的概念，由CSS引擎根据文档中的内容所创建，主要用于文档元素的定位、布局和格式化等用途。盒子与元素并不是一一对应的，有时多个元素会合并生成一个盒子，有时一个元素会生成多个盒子（如匿名盒子）。</li> + <li><strong>块级元素</strong>：block-level element，元素的 <code>display</code> 为 <code>block</code>、<code>list-item</code>、<code>table</code> 时，该元素将成为块级元素。元素是否是块级元素仅是元素本身的属性，并不直接用于格式化上下文的创建或布局。</li> + <li><strong>块级盒子</strong>：block-level box，由块级元素生成。一个块级元素至少会生成一个块级盒子，但也有可能生成多个（例如列表项元素）。</li> + <li><strong>块盒子</strong>：block box，如果一个块级盒子同时也是一个块容器盒子（见下），则称其为块盒子。除具名块盒子之外，还有一类块盒子是匿名的，称为匿名块盒子（Anonymous block box），匿名盒子无法被CSS选择符选中。</li> + <li><strong>块容器盒子</strong>：block container box或block containing box，块容器盒子侧重于当前盒子作为“容器”的这一角色，它不参与当前块的布局和定位，它所描述的仅仅是当前盒子与其后代之间的关系。换句话说，块容器盒子主要用于确定其子元素的定位、布局等。</li> +</ul> + +<p>注意：盒子分为“块盒子”和“块级盒子”两种，但元素只有“块级元素”，而没有“块元素”。下面的“行内级元素”也是一样。</p> + +<ul> + <li><strong>行内级元素</strong>：inline-level element，<code>display</code> 为 <code>inline</code>、<code>inline-block</code>、<code>inline-table</code> 的元素称为行内级元素。与块级元素一样，元素是否是行内级元素仅是元素本身的属性，并不直接用于格式化上下文的创建或布局。</li> + <li><strong>行内级盒子</strong>：inline-level box，由行内级元素生成。行内级盒子包括行内盒子和原子行内级盒子两种，区别在于该盒子是否参与行内格式化上下文的创建。</li> + <li><strong>行内盒子</strong>：inline box，参与行内格式化上下文创建的行内级盒子称为行内盒子。与块盒子类似，行内盒子也分为具名行内盒子和匿名行内盒子（anonymous inline box）两种。</li> + <li><strong>原子行内级盒子</strong>：atomic inline-level box，不参与行内格式化上下文创建的行内级盒子。原子行内级盒子一开始叫做原子行内盒子（atomic inline box），后被修正。原子行内级盒子的内容不会拆分成多行显示。</li> +</ul> + +<p>另外，本文的英文原文仍未最后定稿，因此部分内容并不完整。待英文原文更新后应及时更新译文。</p> +</div> + +<h2 id="盒子的生成">盒子的生成</h2> + +<p><span style="line-height: inherit;">盒子的生成是 CSS 视觉格式化模型的一部分，用于从文档元素生成盒子。盒子有不同的类型，不同类型的盒子的格式化方法也有所不同。盒子的类型取决于 CSS </span>{{ cssxref("display") }} 属性。</p> + +<h3 id="块级元素与块盒子">块级元素与块盒子</h3> + +<p><span style="line-height: inherit;">当元素的</span> {{ cssxref("display") }} 为 <code>block</code>、<code>list-item</code> 或 <code>table</code><span style="line-height: inherit;"> 时，该元素将成为块级元素。一个块级元素会被格式化成一个块（例如文章的一个段落），默认按照垂直方向依次排列。</span></p> + +<p>每个块级盒子都会参与<a href="/en-US/docs/CSS/block_formatting_context" title="block formatting context">块格式化上下文（block formatting context）</a>的创建，而每个块级元素都会至少生成一个块级盒子，即主块级盒子（<em>principal block-level</em><em> box）。有</em>一些元素，比如列表项会生成额外的盒子来放置项目符号，而那些会生成列表项的元素可能会生成更多的盒子。不过，多数元素只生成一个主块级盒子。 </p> + +<p>主块级盒子包含由后代元素生成的盒子以及内容，同时它也会参与<a href="/zh-CN/docs/CSS/Positioning_scheme" title="CSS/Positioning scheme">定位方案</a>。</p> + +<p><img alt="venn_blocks.png" class="internal lwrap" src="/@api/deki/files/5995/=venn_blocks.png" style="float: left;">一个块级盒子可能也是一个块容器盒子。块容器盒子（<em>block container box）要么</em>只包含其它块级盒子，要么只包含行内盒子并同时创建一个行内<a href="/en-US/docs/CSS/Inline_formatting_context" title="CSS/Inline formatting context">格式化上下文（inline formatting context）</a>。</p> + +<p>能够注意到块级盒子与块容器盒子是不同的这一点很重要。前者描述了元素与其父元素和兄弟元素之间的行为，而后者描述了元素跟其后代之间的行为。有些块级盒子并不是块容器盒子，比如表格；而有些块容器盒子也不是块级盒子，比如非替换行内块和非替换表格单元格。</p> + +<p>一个同时是块容器盒子的块级盒子称为块盒子（<em>block box）。</em></p> + +<h4 id="匿名块盒子" style="">匿名块盒子</h4> + +<p>在某些情况下进行视觉格式化时，需要添加一些增补性的盒子，这些盒子不能用CSS选择符选中，因此称为匿名盒子（<em>anonymous boxes）</em>。</p> + +<p><span style="line-height: inherit;">CSS选择器不能作用于匿名盒子(</span><em>anonymous boxes</em><span style="line-height: inherit;">)，所以它不能被样式表赋予样式。也就是说，此时所有可继承的 CSS 属性值都为</span> <code>inherit</code> ，而所有不可继承的 CSS 属性值都为 <code>initial</code>。</p> + +<p>块包含盒子可能只包含行内级盒子，也可能只包含块级盒子，但通常的文档都会同时包含两者，在这种情况下，就会在相邻的行内级盒子外创建<span style="line-height: inherit;">匿名块盒子。</span></p> + +<h3 id="示例">示例</h3> + +<p>考虑下面的HTML代码，假设 {{ HTMLElement("div") }} 和 {{ HTMLElement("p") }} 都保持默认的样式（即它们的 <code>display</code> 为 <code>block</code>）：</p> + +<pre class="brush: html"><div>Some inline text <p>followed by a paragraph</p> followed by more inline text.</div> +</pre> + +<p>此时会产生两个匿名块盒子：一个是 <code><p></code> 元素前面的那些文本（<code>Some inline text</code>），另一个是 <p> 元素后面的文本（<code>followed by more inline text.</code>）。此时会生成下面的块结构：</p> + +<p><img alt="" src="https://developer.mozilla.org/@api/deki/files/5996/=anonymous_block-level_boxes.png" style="height: 137px; width: 597px;"></p> + +<p>显示为：</p> + +<pre>Some inline text +followed by a paragraph +followed by more inline text. +</pre> + +<p>对这两个匿名盒子来说，程序员无法像 {{ HTMLElement("p") }} 元素那样控制它们的样式，因此它们会从 {{ HTMLElement("div") }} 那里继承那些可继承的属性，如 {{ cssxref("color") }}。其他不可继承的属性则会设置为 <code>initial</code>，比如，因为没有为它们指定 {{ cssxref("background-color") }}，因此其具有默认的透明背景，而 <code><p></code> 元素的盒子则能够用CSS指定背景颜色。类似地，两个匿名盒子的文本颜色总是一样的。</p> + +<p>另一种会创建匿名块盒子的情况是一个行内盒子中包含一或多个块盒子。此时，包含块盒子的盒子会拆分为两个行内盒子，分别位于块盒子的前面和后面。块盒子前面的所有行内盒子会被一个匿名块盒子包裹，块盒子后面的行内盒子也是一样。因此，块盒子将成为这两个匿名块盒子的兄弟盒子。</p> + +<p>如果有多个块盒子，而它们中间又没有行内元素，则会在这些盒子的前面和后面创建两个匿名块盒子。</p> + +<h3 id="示例_2">示例</h3> + +<p>考虑下面的HTML代码，假设 {{ HTMLElement("p") }} 的 <code>display</code> 为 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">inline</span></font>，{{ HTMLElement("span") }} 的 <code>display</code> 为 <code>block</code>：</p> + +<pre class="brush: html"><code><p>Some <em>inline</em> text <span>followed by a paragraph</span> followed by more inline text.</p></code> +</pre> + +<p>此时会产生两个匿名块盒子：一个是 <code><span></code> 元素前面的文本（<code>Some <em>inline</em> text</code>），另一个是其之后的文本（<code>followed by more inline text.</code>）。此时会生成下面的块结构：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13625/anonymous_block_box_break.png" style="height: 137px; width: 597px;"></p> + +<p>显示为：</p> + +<pre>Some inline text +followed by a paragraph +followed by more inline text. +</pre> + +<h3 id="行内级元素和行内盒子">行内级元素和行内盒子</h3> + +<p>如果一个元素的 {{ cssxref("display") }} 属性为 <code>inline</code>、<code>inline-block</code> 或 <code>inline-table</code>，则称该元素为行内级元素。显示时，它不会生成内容块，但是可以与其他行内级内容一起显示为多行。一个典型的例子是包含多种格式内容（如强调文本、图片等）的段落，就可以由行内级元素组成。</p> + +<p><img alt="" class="internal lwrap" src="https://developer.mozilla.org/@api/deki/files/6008/=venn_inlines.png" style="float: left; height: 287px; width: 384px;"></p> + +<div class="warning"> +<p>该图使用了过时的术语，见下面的“注意”（译注：指图中的 “Atomic inline boxes”）。除此之外该图还有一个错误，右边的黄色部分应该完全包含左侧的椭圆（类似于数学上的超集），因为标准所说的是“如果行内级元素生成的盒子参与行内格式化上下文的创建，则该盒子为一个行内级盒子”，见“CSS 2.2标准的9.2.2节”。</p> +</div> + +<p>行内级元素会生成行内级盒子，该盒子同时会参与行内格式化上下文（<a href="https://developer.mozilla.org/zh-CN/docs/CSS/Inline_formatting_context">inline formatting context</a>）的创建。行内盒子既是行内级盒子，也是一个其内容会参与创建其容器的行内格式化上下文的盒子，比如所有具有 <code>display:inline</code> 样式的非替换盒子。如果一个行内级盒子的内容不参与行内格式化上下文的创建，则称其为原子行内级盒子。而通过替换行内级元素或 <code>display</code> 值为 <code>inline-block</code> 或 <code>inline-table</code> 的元素创建的盒子不会像行内盒子一样可以被拆分为多个盒子。</p> + +<div class="note"> +<p>注意：开始的时候，原子行内级盒子叫做原子行内盒子，这并不准确，因为它们并不是行内盒子。后来在一次勘误时修正了这一问题。不过，当你见到某些文章中使用了“原子行内盒子”的时候，你尽可以将其理解为“原子行内级盒子”，因为这仅仅是一个名字的修改。</p> +</div> + +<div class="note"> +<p>在同一个行内格式化上下文中，原子行内级盒子不能拆分成多行：</p> + +<pre class="brush: html"><style> + span { + display:inline; /* default value*/ + } +</style> +<div style="width:20em;"> + The text in the span <span>can be split in several + lines as it</span> is an inline box. +</div> +</pre> + +<p>可能会显示为：</p> + +<p>The text in the span can be split into several<br> + lines as it is an inline box.</p> + +<p>而：</p> + +<pre class="brush: html"><style> + span { + display:inline-block; + } +</style> +<div style="width:20em;"> + The text in the span <span>cannot be split in several + lines as it</span> is an inline-block box. +</div> +</pre> + +<p>则可能显示为：</p> + +<p>The text in the span <br> + cannot be split into several lines as it is an<br> + inline-block box.</p> + +<p>其中的“cannot be split into several lines as it”永远不会换行。</p> +</div> + +<h4 id="匿名行内盒子">匿名行内盒子</h4> + +<div>类似于块盒子，CSS引擎有时候也会自动创建一些行内盒子。这些行内盒子无法被选择符选中，因此是匿名的，它们从父元素那里继承那些可继承的属性，其他属性保持默认值 <code>initial</code>。</div> + +<div> </div> + +<div>一种常见的情况是CSS引擎会自动为直接包含在块盒子中的文本创建一个行内格式化上下文，在这种情况下，这些文本会被一个足够大的匿名行内盒子所包含。但是如果仅包含空格则有可能不会生成匿名行内盒子，因为空格有可能会由于 {{ cssxref("white-space") }} 的设置而被移除，从而导致最终的实际内容为空。</div> + +<div> </div> + +<div class="note">示例 TBD</div> + +<h3 id="其他类型的盒子">其他类型的盒子</h3> + +<h4 id="行盒子">行盒子</h4> + +<p>行盒子由行内格式化上下文创建，用来显示一行文本。在块盒子内部，行盒子总是从块盒子的一边延伸到另一边（译注：即占据整个块盒子的宽度）。当有浮动元素时，行盒子会从向左浮动的元素的右边缘延伸到向右浮动的元素的左边缘。</p> + +<div>行盒子更多是以技术性目的而存在的，Web开发者通常不需要关心。</div> + +<h4 id="Run-in_盒子">Run-in 盒子</h4> + +<div>Run-in 盒子通过 <code>display:run-in</code> 来定义，它可以是块盒子，也可以是行内盒子，这取决于紧随其后的盒子的类型。Run-in 盒子可以用来在可能的情况下将标题嵌入文章的第一个段落中。</div> + +<div> </div> + +<div class="note"> +<p>注意：Run-in 盒子已经在CSS 2.1的标准中移除了，但可能会在CSS 3中作为一个实验性的内容再次加入。因此最好不要将其用于正式项目。</p> +</div> + +<h4 id="由其他模型引入的盒子">由其他模型引入的盒子</h4> + +<div>除了行内格式化上下文和块格式化上下文之外，CSS还定义了几种内容模型，这些模型同样可以应用于元素。这些模型一般用来描述布局，它们可能会定义一些额外的盒子类型：</div> + +<div> </div> + +<ul> + <li><a href="https://developer.mozilla.org/zh-CN/docs/CSS/table-layout">表格内容模型</a>可能会创建一个表格包装器盒子和一个表格盒子，以及多个其他盒子如表格标题盒子等</li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/CSS/Using_CSS_multi-column_layouts">多列内容模型</a>可能会在容器盒子和内容之间创建多个列盒子</li> + <li>实验性的网格内容模型或flex-box内容模型同样会创建一些其他种类的盒子</li> +</ul> + +<h4 id="定位规则">定位规则</h4> + +<p>一旦生成了盒子以后，CSS引擎就需要定位它们以完成布局。下面是定位盒子时所使用的规则：</p> + +<ul> + <li>普通流：按照次序依次定位每个盒子</li> + <li>浮动：将盒子从普通流中单独拎出来，将其放到外层盒子的某一边</li> + <li>绝对定位：按照绝对位置来定位盒子，其位置根据盒子的包含元素所建立的绝对坐标系来计算，因此绝对定位元素有可能会覆盖其他元素</li> +</ul> + +<h3 id="普通流">普通流</h3> + +<div>在普通流中，盒子会依次放置。在块格式化上下文中，盒子在垂直方向依次排列；而在行内格式化上下文中，盒子则水平排列。当CSS的 {{ cssxref("position") }} 属性为 <code>static</code> 或 <code>relative</code>，并且 {{ cssxref("float") }} 为 <code>none</code> 时，其布局方式为普通流。</div> + +<h3 id="示例_3">示例</h3> + +<div class="note"> +<p>在普通流的块格式化上下文中，盒子会垂直依次排列：</p> + +<p>[TODO 图片]</p> + +<p>在普通流的行内格式化上下文中，盒子会水平依次排列：</p> + +<p>[TODO 图片]</p> +</div> + +<div class="note"> +<p>普通流又有两种情况：静态定位和相对定位：</p> + +<p>{{ cssxref("position") }} 为 <code>static</code> 时为静态定位，此时每个盒子根据普通流所计算出的确切位置来定位。</p> + +<p>[TODO 图片]</p> + +<p>当 {{ cssxref("position") }} 为 <code>relative</code> 时为相对定位，此时每个盒子还会根据 {{ cssxref("top") }}、{{ cssxref("bottom") }}、{{ cssxref("left") }} 和 {{ cssxref("right") }} 属性的值在其原本所在的位置上产生指定大小的偏移。</p> +</div> + +<h3 id="浮动">浮动</h3> + +<p>在浮动定位中，浮动盒子会浮动到当前行的开始或尾部位置。这会导致普通流中的文本及其他内容会“流”到浮动盒子的边缘处，除非元素通过 {{ cssxref("clear") }} 清除了前面的浮动。</p> + +<p>一个盒子的 {{ cssxref("float") }} 值不为 <code>none</code>，并且其 {{ cssxref("position") }} 为 <code>static</code> 或 <code>relative</code> 时，该盒子为浮动定位。如果将 {{ cssxref("float") }} 设置为 <code>left</code>，浮动盒子会定位到当前行盒子的开始位置（左侧），如果设置为 <code>right</code>，浮动盒子会定位到当前行盒子的尾部位置（右侧）。不管是左浮动还是右浮动，行盒子都会伸缩以适应浮动盒子的大小。</p> + +<p>[TODO 图片]</p> + +<h3 id="绝对定位">绝对定位</h3> + +<p>在绝对定位中，盒子会完全从当前流中移除，并且不会再与其有任何联系（译注：此处仅指定位和位置计算，而绝对定位的元素在文档树中仍然与其他元素有父子或兄弟等关系），其位置会使用 {{ cssxref("top") }}、{{ cssxref("bottom") }}、{{ cssxref("left") }} 和 {{ cssxref("right") }} 相对其<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/All_About_The_Containing_Block">包含块</a>进行计算。</p> + +<p>如果元素的 {{ cssxref("position") }} 为 <code>absolute</code> 或 <code>fixed</code>，该元素为绝对定位。</p> + +<p>对固定位置的元素来说，其包含块为整个视口，该元素相对视口进行绝对定位，因此滚动时元素的位置并不会改变。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{css_key_concepts}}</li> +</ul> |