比较版本

视觉格式化模型

修订版 468269:

由 yan 在 进行的修订 468269

修订版 468347:

由 yan 在 进行的修订 468347

标题:
视觉格式化模型
视觉格式化模型
网址缩略名:
CSS/Visual_formatting_model
CSS/Visual_formatting_model
内容:

修订版 468269
修订版 468347
n29      盒子的渲染相对于它的块容器&nbsp;<em>containing block &nbsp;(</em>原文也说 <en29      盒子的渲染相对于它的包含块&nbsp;<em>containing block &nbsp;</em>的边界。通常元素
>m>block container)</em>&nbsp;的边界。通常元素是它的后代元素的块容器。注意盒子并不受它的块容器的限制,>是它的后代元素的包含块。注意盒子并不受它的包含块的限制,<span style="line-height: inherit;">当
><span style="line-height: inherit;">当它的布局跑到块容器的外面时称为</span><span >它的布局跑到包含块的外面时称为</span><span style="line-height: inherit;">溢出&nbsp
>style="line-height: inherit;">溢出&nbsp;</span><em style="line-heig>;</span><em style="line-height: inherit;">overflow</em><span styl
>ht: inherit;">overflow</em><span style="line-height: inherit;">。<>e="line-height: inherit;">。</span>
>/span> 
30    </p>
31    <div class="note">
32      <strong>Note:</strong>&nbsp; 请查看规范对 &nbsp;<a href="http://w
 >ww.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.htm
 >l#containing-block-details" title="http://www.w3.org/TR/CSS21/vis
 >udet.html#containing-block-details">containing block</a>&nbsp;</e
 >m> 的定义, 与&nbsp;<a href="http://www.w3.org/TR/CSS2/visuren.html#bl
 >ock-boxes" title="http://www.w3.org/TR/CSS2/visuren.html#block-bo
 >xes">块容器盒子 <em>block container box</em></a>&nbsp;概念不同。
30    </p>33    </div>
n44      块级盒子参与生成&nbsp;<a href="/en-US/docs/CSS/block_formatting_conn47      块级盒子参与&nbsp;<a href="/en-US/docs/CSS/block_formatting_conte
>text" title="block formatting context">块格式化上下文 block formatting c>xt" title="block formatting context">块格式化上下文 block formatting con
>ontext</a>。每个块级元素至少生成一个块级盒子,称为主要块级盒子&nbsp;<em>principal block-lev>text</a>。每个块级元素至少生成一个块级盒子,称为主要块级盒子&nbsp;<em>principal block-level
>el</em> <em>box。</em>&nbsp;一些元素,比如&lt;li&gt;,另外生成一个盒子来放置项目符号。不过多数></em> <em>box。</em>&nbsp;一些元素,比如&lt;li&gt;,另外生成一个盒子来放置项目符号。不过多数元素
>元素只生成一个主要块级盒子。&nbsp;>只生成一个主要块级盒子。&nbsp;
n50      <img align="left" alt="venn_blocks.png" class="internal lwrn53      <img align="left" alt="venn_blocks.png" class="internal lwr
>ap" data-pinit="registered" src="/@api/deki/files/5995/=venn_bloc>ap" data-pinit="registered" src="/@api/deki/files/5995/=venn_bloc
>ks.png">一个块级盒子可能也是一个块容器盒子。 块容器盒子&nbsp;<em>block container box</em>ks.png">一个块级盒子可能也是一个块容器盒子。 块容器盒子&nbsp;<em>block container box</em
>>&nbsp;只包含其它块级盒子,或生成一个&nbsp;<a href="/en-US/docs/CSS/Inline_form>>&nbsp;只包含其它块级盒子,或生成一个&nbsp;<a href="/en-US/docs/CSS/Inline_forma
>atting_context" title="CSS/Inline formatting context">内联格式化上下文 in>tting_context" title="CSS/Inline formatting context">内联格式化上下文 inl
>line formatting context</a>,因而只包含内联级盒子。注意块级盒子与块容器盒子概念不同。&nbsp;前者描>ine formatting context</a>,因而只包含内联级盒子。注意块级盒子与块容器盒子概念不同。&nbsp;前者描述
>述元素跟它的父元素与兄弟元素之间的表现,后者描述元素跟它的后代之间的表现。一些块级盒子,比如表格,不是块容器盒子。相反,一些块容器>元素跟它的父元素与兄弟元素之间的表现,后者描述元素跟它的后代之间的表现。一些块级盒子,比如表格,不是块容器盒子。相反,一些块容器盒
>盒子,比如非替换内联盒子及非替换表格单元格,不是块级容器。>子,比如非替换内联盒子及非替换表格单元格,不是块级容器。
n276      对于绝对定位方案&nbsp;<em>absolute positioning scheme,</em> 盒子常规流n279      对于绝对定位方案&nbsp;<em>absolute positioning scheme,</em> 盒子脱离常规流
>移除,不影响常规流的布局。&nbsp;它的定位相对于它的 <a href="/en-US/docs/CSS/Containing_>,不影响常规流的布局。&nbsp;它的定位相对于它的包含块,相关CSS属性: {{ cssxref("top") }}, {{ c
>block" title="CSS/Containing block">容器 containing block</a>&nbsp>ssxref("bottom") }}, {{ cssxref("left") }} 及 {{ cssxref("right") 
>;,相关CSS属性: {{ cssxref("top") }}, {{ cssxref("bottom") }}, {{ cssx>}}&nbsp;
>ref("left") }} 及 {{ cssxref("right") }}&nbsp; 
t282      固定定位元素&nbsp;<em>fixed positioned element</em>&nbsp; 也是绝对定位元t285      固定定位元素&nbsp;<em>fixed positioned element</em>&nbsp; 也是绝对定位元
>素,它的块容器是视口。当页面滚动时它固定在屏幕上,因为视口没有移动。>素,它的包含块是视口。当页面滚动时它固定在屏幕上,因为视口没有移动。

返回历史