📄 visuren.html
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html lang="en"><HEAD><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><TITLE>Visual formatting model</TITLE><link rel="stylesheet" href="style/default.css" type="text/css"><link rel="prev" href="box.html"><link rel="next" href="visudet.html"><link rel="contents" href="cover.html#minitoc"><link rel="CSS-properties" href="propidx.html" title="properties"><link rel="index" href="indexlist.html" title="index"></HEAD><BODY><div class="navbar" align="center"><p><a href="box.html">previous</a> <a href="visudet.html">next</a> <a href="cover.html#minitoc">contents</a> <a href="propidx.html">properties</a> <a href="indexlist.html">index</a> </div><hr class="navbar"><H1 align="center">9 Visual formatting model</H1><div class="subtoc"><p><strong>Contents</strong> <ul class="toc"> <li class="tocline2"><a href="visuren.html#q1" class="tocxref">9.1 Introduction to the visual formatting model</a> <ul class="toc"> <li class="tocline3"><a href="visuren.html#q2" class="tocxref">9.1.1 The viewport</a> <li class="tocline3"><a href="visuren.html#containing-block" class="tocxref">9.1.2 <span class="index-def" title="containing block"> Containing blocks</span></a> </ul> <li class="tocline2"><a href="visuren.html#box-gen" class="tocxref">9.2 Controlling box generation</a> <ul class="toc"> <li class="tocline3"><a href="visuren.html#q5" class="tocxref">9.2.1 Block-level elements and block boxes</a> <ul class="toc"> <li class="tocline4"><a href="visuren.html#anonymous-block-level" class="tocxref"> Anonymous block boxes</a> </ul> <li class="tocline3"><a href="visuren.html#q7" class="tocxref">9.2.2 Inline-level elements and inline boxes</a> <ul class="toc"> <li class="tocline4"><a href="visuren.html#anonymous" class="tocxref"> Anonymous inline boxes</a> </ul> <li class="tocline3"><a href="visuren.html#compact" class="tocxref">9.2.3 Compact boxes</a> <li class="tocline3"><a href="visuren.html#run-in" class="tocxref">9.2.4 Run-in boxes</a> <li class="tocline3"><a href="visuren.html#display-prop" class="tocxref">9.2.5 The <span class="propinst-display">'display'</span> property</a> </ul> <li class="tocline2"><a href="visuren.html#positioning-scheme" class="tocxref">9.3 Positioning schemes</a> <ul class="toc"> <li class="tocline3"><a href="visuren.html#choose-position" class="tocxref">9.3.1 Choosing a positioning scheme: <span class="propinst-position">'position'</span> property</a> <li class="tocline3"><a href="visuren.html#position-props" class="tocxref">9.3.2 Box offsets: <span class="propinst-top">'top'</span>, <span class="propinst-right">'right'</span>, <span class="propinst-bottom">'bottom'</span>, <span class="propinst-left">'left'</span></a> </ul> <li class="tocline2"><a href="visuren.html#normal-flow" class="tocxref">9.4 Normal flow</a> <ul class="toc"> <li class="tocline3"><a href="visuren.html#block-formatting" class="tocxref">9.4.1 Block formatting context</a> <li class="tocline3"><a href="visuren.html#inline-formatting" class="tocxref">9.4.2 Inline formatting context</a> <li class="tocline3"><a href="visuren.html#relative-positioning" class="tocxref">9.4.3 Relative positioning</a> </ul> <li class="tocline2"><a href="visuren.html#floats" class="tocxref">9.5 Floats</a> <ul class="toc"> <li class="tocline3"><a href="visuren.html#float-position" class="tocxref">9.5.1 Positioning the float: the <span class="propinst-float">'float'</span> property</a> <li class="tocline3"><a href="visuren.html#flow-control" class="tocxref">9.5.2 Controlling flow next to floats: the <span class="propinst-clear">'clear'</span> property</a> </ul> <li class="tocline2"><a href="visuren.html#absolute-positioning" class="tocxref">9.6 Absolute positioning</a> <ul class="toc"> <li class="tocline3"><a href="visuren.html#fixed-positioning" class="tocxref">9.6.1 Fixed positioning</a> </ul> <li class="tocline2"><a href="visuren.html#q24" class="tocxref">9.7 Relationships between 'display', 'position', and 'float'</a> <li class="tocline2"><a href="visuren.html#comparison" class="tocxref">9.8 Comparison of normal flow, floats, and absolute positioning</a> <ul class="toc"> <li class="tocline3"><a href="visuren.html#q26" class="tocxref">9.8.1 Normal flow</a> <li class="tocline3"><a href="visuren.html#q27" class="tocxref">9.8.2 Relative positioning</a> <li class="tocline3"><a href="visuren.html#q28" class="tocxref">9.8.3 Floating a box</a> <li class="tocline3"><a href="visuren.html#q29" class="tocxref">9.8.4 Absolute positioning</a> </ul> <li class="tocline2"><a href="visuren.html#q30" class="tocxref">9.9 Layered presentation</a> <ul class="toc"> <li class="tocline3"><a href="visuren.html#z-index" class="tocxref">9.9.1 Specifying the stack level: the <span class="propinst-z-index">'z-index'</span> property</a> </ul> <li class="tocline2"><a href="visuren.html#direction" class="tocxref">9.10 Text direction: the <span class="propinst-direction">'direction'</span> and <span class="propinst-unicode-bidi">'unicode-bidi'</span> properties</a> </ul></div><H2><a name="q1">9.1 Introduction to the visual formatting model</a></H2><P>This chapter and the next describe the <a name="x0"><span class="index-def"title="visual formatting model">visual formatting model</span></a>: how useragents process the <a href="conform.html#doctree">document tree</a>for visual <a href="media.html">media</a>.<P>In the visual formatting model, each element in the document treegenerates zero or more boxes according to the <a href="box.html">boxmodel</a>. The layout of these boxes is governed by:</p><ul><li><a href="box.html#box-dimensions">box dimensions</a> and <ahref="#box-gen">type</a>.<li><a href="#positioning-scheme">positioning scheme</a>(normal flow, float, and absolute).<li>relationships between elementsin the <a href="conform.html#doctree">document tree.</a><li>external information (e.g., viewport size, <ahref="conform.html#intrinsic">intrinsic</a> dimensions of images, etc.).</ul><P>The properties defined in this chapter and the next apply to both<a href="media.html#continuous-media-group">continuous media</a> and<a href="media.html#paged-media-group">paged media</a>. However, themeanings of the <a href="box.html#margin-properties">marginproperties</a> vary when applied to paged media (see the <ahref="page.html#page-model">page model</a> for details).<P>The visual formatting model does not specify all aspects offormatting (e.g., it does not specify a letter-spacing algorithm). <ahref="conform.html#conformance">Conforming user agents</a> may behavedifferently for those formatting issues not covered by thisspecification.<h3><a name="q2">9.1.1 The viewport</a></h3><P>User agents for <ahref="media.html#continuous-media-group">continuous media</a>generally offer users a <span class="index-def" title="viewport"><aname="viewport"><dfn>viewport</dfn></a></span> (a window or otherviewing area on the screen) through which users consult adocument. User agents may change the document's layout when theviewport is resized (see the <ahref="#initial-containing-block">initial containing block</a>). Whenthe viewport is smaller than the document's initial containing block,the user agent should offer a scrolling mechanism. There is at mostone viewport per <a href="intro.html#canvas">canvas</a>, but useragents may render to more than one canvas (i.e., provide differentviews of the same document).<H3>9.1.2 <span class="index-def" title="containing block"><a name="containing-block">Containing blocks</a></span></H3><P>In CSS2, many box positions and sizes are calculated with respectto the edgesof a rectangular box called a <a name="x3"><span class="index-def"title="containing block"><dfn>containing block</dfn></span></a>. Ingeneral, generated boxes act as containing blocks for descendantboxes; we say that a box "establishes" the containing block for itsdescendants. The phrase "a box's containing block" means "thecontaining block in which the box lives," not the one it generates.<P>Each box is given a position with respect to its containing block,but it is not confined by this containing block; it may <ahref="visufx.html#overflow">overflow</a>.<P>The root of the <a href="conform.html#doctree">document tree</a>generates a box that serves as the <span class="index-def"title="initial containing block|containing block::initial"><aname="initial-containing-block"><dfn>initial containingblock</dfn></a></span> for subsequent layout. <P>The width of the initial containing block may be specified with the<a href="visudet.html#propdef-width" class="noxref"><span class="propinst-width">'width'</span></a> property for the rootelement. If this property has the value 'auto', the user agentsupplies the initial width (e.g., the user agent uses the currentwidth of the <a href="#viewport">viewport</a>).<P>The height of the initial containing block may be specified withthe <a href="visudet.html#propdef-height" class="noxref"><span class="propinst-height">'height'</span></a> property for theroot element. If this property has the value 'auto', the containingblock height will grow to accommodate the document's content.<P>The initial containing block cannot be positioned or floated (i.e.,user agents <a href="syndata.html#ignore">ignore</a> the <a href="visuren.html#propdef-position" class="noxref"><spanclass="propinst-position">'position'</span></a> and <a href="visuren.html#propdef-float" class="noxref"><spanclass="propinst-float">'float'</span></a> properties for the rootelement).<P>The <a href="visudet.html#containing-block-details">details</a> ofhow a containing block's dimensions are calculated are described inthe <a href="visudet.html">next chapter</a>.<H2>9.2 <a name="box-gen">Controlling box generation</a></h2><P>The following sections describe the types of boxes that may begenerated in CSS2. A box's type affects, in part, its behavior in thevisual formatting model. The <a href="visuren.html#propdef-display" class="noxref"><spanclass="propinst-display">'display'</span></a> property, described below,specifies a box's type.<H3><a name="q5">9.2.1 Block-level elements and block boxes</a></h3><P><span class="index-def" title="block-levelelement"><a name="block-level"><dfn>Block-level elements</dfn></a></span> are those elements ofthe source document that are formatted visually asblocks (e.g., paragraphs). Several values of the <a href="visuren.html#propdef-display" class="noxref"><spanclass="propinst-display">'display'</span></a> property make an elementblock-level: 'block', 'list-item', 'compact' and 'run-in' (part of thetime; see <a href="#compact">compact</a> and <a href="#run-in">run-in boxes</a>),and 'table'.<P>Block-level elements generate a <span class="index-def"title="principal block box"><a name="principal-box"><dfn>principalblock box</dfn></a></span> that only contains <span class="index-def"title="block box"><a name="block-box"><dfn>blockboxes</dfn></a></span>. The principal block box establishes the <ahref="#containing-block">containing block</a> for descendant boxes andgenerated content and is also the box involved in any positioningscheme. Principal block boxes participate in a <ahref="#block-formatting">block formatting context</a>.<P>Some block-level elements generate additional boxes outside of theprincipal box: 'list-item' elements and those with <AHREF="generate.html#markers">markers</A>. These additional boxes areplaced with respect to the principal box.<h4> <a name="anonymous-block-level">Anonymous block boxes</a></h4><p>In a document like this:<pre><DIV> Some text <P>More text</DIV></pre>(and assuming the DIV and the P both have 'display: block'), theDIV appears to have both inline content and block content. To make iteasier to define the formatting, we assume that there is an <em><a name="x9"><spanclass="index-def" title="anonymous">anonymous block box</span></a></em>around "Some text".<div class="figure"><p><img src="images/anon-block.gif" alt="diagram showing the threeboxes for the example above"><SPAN class="dlink"> <A name="img-anon-block" href="images/longdesc/anon-block-desc.html" title="Long description for anonymous block box">[D]</A></SPAN> <p class="caption">Diagram showing thethree boxes, of which one is anonymous, for the example above.</div><p>In other words: if a block box (such as that generated forthe DIV above) has another block box inside it (such as the Pabove), then we force it to have <em>only</em> block boxesinside it, by wrapping any inline boxes in an anonymous block box.<div class="example"><P style="display:none">Example(s):</P><P>This model would apply in the following example if the followingrules:</p><PRE>/* Note: HTML UAs may not respect these rules */BODY { display: inline }P { display: block }</PRE><P>were used with this HTML document:</p><PRE class="html-example"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HEAD><TITLE>Anonymous text interrupted by a block</TITLE></HEAD><BODY><em>This is anonymous text before the P.</em><P>This is the content of P.</><em>This is anonymous text after the P.</em></BODY></PRE><P>The BODY element contains a chunk (C1) of anonymous text followedby a block-level element followed by another chunk (C2) of anonymoustext. The resulting boxes would be an anonymous block box for BODY,containing an anonymous block box around C1, the P block box, andanother anonymous block box around C2.</div><p>The properties of anonymous boxes are inherited from theenclosing non-anonymous box (in the example: the one forDIV). Non-inherited properties have their initial value. For example,the font of the anonymous box is inherited from the DIV, but themargins will be 0.<H3><a name="q7">9.2.2 Inline-level elements and inline boxes</a></h3><P><span class="index-def" title="inline-level element"><a name="inline-level"><dfn>Inline-level⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -