📄 visudet.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 details</TITLE><link rel="stylesheet" href="style/default.css" type="text/css"><link rel="prev" href="visuren.html"><link rel="next" href="visufx.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="visuren.html">previous</a> <a href="visufx.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">10 Visual formatting model details</H1><div class="subtoc"><p><strong>Contents</strong> <ul class="toc"> <li class="tocline2"><a href="visudet.html#containing-block-details" class="tocxref">10.1 Definition of "containing block"</a> <li class="tocline2"><a href="visudet.html#the-width-property" class="tocxref">10.2 Content width: the <span class="propinst-width">'width'</span> property</a> <li class="tocline2"><a href="visudet.html#Computing_widths_and_margins" class="tocxref">10.3 Computing widths and margins</a> <ul class="toc"> <li class="tocline3"><a href="visudet.html#q4" class="tocxref">10.3.1 Inline, non-replaced elements</a> <li class="tocline3"><a href="visudet.html#q5" class="tocxref">10.3.2 Inline, replaced elements</a> <li class="tocline3"><a href="visudet.html#q6" class="tocxref">10.3.3 Block-level, non-replaced elements in normal flow</a> <li class="tocline3"><a href="visudet.html#q7" class="tocxref">10.3.4 Block-level, replaced elements in normal flow</a> <li class="tocline3"><a href="visudet.html#q8" class="tocxref">10.3.5 Floating, non-replaced elements</a> <li class="tocline3"><a href="visudet.html#q9" class="tocxref">10.3.6 Floating, replaced elements</a> <li class="tocline3"><a href="visudet.html#abs-non-replaced-width" class="tocxref">10.3.7 Absolutely positioned, non-replaced elements</a> <li class="tocline3"><a href="visudet.html#q11" class="tocxref">10.3.8 Absolutely positioned, replaced elements</a> </ul> <li class="tocline2"><a href="visudet.html#min-max-widths" class="tocxref">10.4 Minimum and maximum widths: <span class="propinst-min-width">'min-width'</span> and <span class="propinst-max-width">'max-width'</span></a> <li class="tocline2"><a href="visudet.html#the-height-property" class="tocxref">10.5 Content height: the <span class="propinst-height">'height'</span> property</a> <li class="tocline2"><a href="visudet.html#Computing_heights_and_margins" class="tocxref">10.6 Computing heights and margins</a> <ul class="toc"> <li class="tocline3"><a href="visudet.html#q15" class="tocxref">10.6.1 Inline, non-replaced elements</a> <li class="tocline3"><a href="visudet.html#q16" class="tocxref">10.6.2 Inline, replaced elements block-level, replaced elements in normal flow, and floating, replaced elements</a> <li class="tocline3"><a href="visudet.html#q17" class="tocxref">10.6.3 Block-level, non-replaced elements in normal flow, and floating, non-replaced elements</a> <li class="tocline3"><a href="visudet.html#abs-non-replaced-height" class="tocxref">10.6.4 Absolutely positioned, non-replaced elements</a> <li class="tocline3"><a href="visudet.html#q19" class="tocxref">10.6.5 Absolutely positioned, replaced elements</a> </ul> <li class="tocline2"><a href="visudet.html#min-max-heights" class="tocxref">10.7 Minimum and maximum heights: <span class="propinst-min-height">'min-height'</span> and <span class="propinst-max-height">'max-height'</span></a> <li class="tocline2"><a href="visudet.html#line-height" class="tocxref">10.8 Line height calculations: the <span class="propinst-line-height">'line-height'</span> and <span class="propinst-vertical-align">'vertical-align'</span> properties</a> <ul class="toc"> <li class="tocline3"><a href="visudet.html#q22" class="tocxref">10.8.1 Leading and half-leading</a> </ul> </ul></div><H2>10.1 <a name="containing-block-details">Definition of "containingblock"</a></H2><p>The position and size of an element's box(es) are sometimescomputed relative to a certain rectangle, called the <dfn><a name="x0"><spanclass="index-def" title="containing block">containingblock</span></a></dfn> of the element. The containing block of an elementis defined as follows:</p><ol><li>The containing block (called the initial containing block)in which the <a href="conform.html#root">rootelement</a> lives is chosen by the user agent.<li>For other elements, unless the element is <ahref="visuren.html#absolutely-positioned">absolutely positioned</a>,the containing block is formed by the content edge of the nearestblock-level ancestor box.<li>If the element has 'position: fixed', the containing block isestablished by the <a href="visuren.html#viewport">viewport</A>.<li>If the element has 'position: absolute', the containing block isestablished by the nearest ancestor with a <a href="visuren.html#propdef-position" class="noxref"><spanclass="propinst-position">'position'</span></a> other than 'static', inthe following way:<ol><li>In the case that the ancestor is block-level, the containing blockis formed by the <a href="box.html#padding-edge">padding edge</a> ofthe ancestor.<li>In the case that the ancestor is inline-level, the containingblock depends on the <a href="visuren.html#propdef-direction" class="noxref"><spanclass="propinst-direction">'direction'</span></a> property of theancestor:<ol><li>If the <a href="visuren.html#propdef-direction" class="noxref"><span class="propinst-direction">'direction'</span></a> is 'ltr', the top and left of the containingblock are the top and left content edges of the first box generated bythe ancestor, and the bottom and right are the bottom and rightcontent edges of the last box of the ancestor.<li>If the <a href="visuren.html#propdef-direction" class="noxref"><span class="propinst-direction">'direction'</span></a> is 'rtl', the top and right are the top andright edges of the first box generated by theancestor, and the bottom and leftare the bottom and left content edges of the last box of the ancestor.</ol></ol><p>If there is no such ancestor, the content edge of the root element'sbox establishes the containing block.</ol><div class="example"><P style="display:none">Example(s):</P><P>With no positioning, the containing blocks (C.B.) in thefollowing document:</p><PRE class="html-example"><HTML> <HEAD> <TITLE>Illustration of containing blocks</TITLE> </HEAD> <BODY id="body"> <DIV id="div1"> <P id="p1">This is text in the first paragraph...</P> <P id="p2">This is text <EM id="em1"> in the <STRONG id="strong1">second</STRONG> paragraph.</EM></P> </DIV> </BODY></HTML></PRE><P>are established as follows:</P><table border><tr><th align="center">For box generated by <td align="center"><strong>C.B. is established by</strong></tr><tr><td align="center">body<td align="center">initial C.B. (UA-dependent)</tr><tr><td align="center">div1<td align="center">body</tr><tr><td align="center">p1<td align="center">div1</tr><tr><td align="center">p2<td align="center">div1</tr><tr><td align="center">em1<td align="center">p2</tr><tr><td align="center">strong1<td align="center">p2</tr></table><P>If we position "div1":</p><PRE class="example"> #div1 { position: absolute; left: 50px; top: 50px }</PRE><P>its containing block is no longer "body"; it becomesthe initial containing block (since there are noother positioned ancestor boxes).<P>If we position "em1" as well:</p><PRE class="example"> #div1 { position: absolute; left: 50px; top: 50px } #em1 { position: absolute; left: 100px; top: 100px }</PRE><P>the table of containing blocks becomes:</p><table border><tr><th align="center">For box generated by<td align="center"><strong>C.B. is established by</strong></tr><tr><td align="center">body<td align="center">initial C.B.</tr><tr><td align="center">div1<td align="center">initial C.B.</tr><tr><td align="center">p1<td align="center">div1</tr><tr><td align="center">p2<td align="center">div1</tr><tr><td align="center">em1<td align="center">div1</tr><tr><td align="center">strong1<td align="center">em1</tr></table><P>By positioning "em1", its containing block becomesthe nearest positioned ancestor box (i.e., that generatedby "div1"). </div><h2>10.2 <a name="the-width-property">Content width</a>: the <a href="visudet.html#propdef-width" class="noxref"><spanclass="propinst-width">'width'</span></a> property</H2><div class="propdef"><dl><dt><span class="index-def" title="'width'"><a name="propdef-width" class="propdef-title"><strong>'width'</strong></a></span><dd><table class="propinfo" cellspacing=0 cellpadding=0><tr valign=baseline><td><em>Value:</em> <td><a href="syndata.html#value-def-length" class="noxref"><span class="value-inst-length"><length></span></a> | <a href="syndata.html#value-def-percentage" class="noxref"><span class="value-inst-percentage"><percentage></span></a> | auto | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a><tr valign=baseline><td><em>Initial:</em> <td>auto<tr valign=baseline><td><em>Applies to:</em> <td>all elements butnon-replaced inline elements, table rows, and row groups<tr valign=baseline><td><em>Inherited:</em> <td>no<tr valign=baseline><td><em>Percentages:</em> <td>refer to width of containing block<tr valign=baseline><td><em>Media:</em> <td><a href="media.html#visual-media-group" class="noxref">visual</a></table></dl></div><P> This property specifies the <ahref="box.html#content-width">content width</a> of boxes generated byblock-level and <a href="conform.html#replaced-element">replaced</a> elements. <P>This property does not apply to non-replaced <ahref="visuren.html#inline-level">inline-level</a> elements. The widthof a non-replaced inline element's boxes is that of the renderedcontent within them (<em>before</em> any relative offset ofchildren). Recall that inline boxes flow into <ahref="visuren.html#line-box">line boxes</a>. The width of line boxesis given by the their <ahref="visuren.html#containing-block">containing block</a>, but may beshorted by the presence of <a href="visuren.html#floats">floats</a>.<P>The width of a replaced element's box is <ahref="conform.html#intrinsic">intrinsic</a> and may be scaled by theuser agent if the value of this property is different than 'auto'.<P>Values have the following meanings:</P><dl><dt><span class="index-inst" title="<length>"><a name="x2" href="syndata.html#value-def-length" class="noxref"><span class="value-inst-length"><strong><length></strong></span></a></span>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -