📄 box.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>Box model</TITLE><link rel="stylesheet" href="style/default.css" type="text/css"><link rel="prev" href="media.html"><link rel="next" href="visuren.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="media.html">previous</a> <a href="visuren.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">8 <a name="box-model">Box model</a></H1><div class="subtoc"><p><strong>Contents</strong> <ul class="toc"> <li class="tocline2"><a href="box.html#box-dimensions" class="tocxref">8.1 Box dimensions</a> <li class="tocline2"><a href="box.html#mpb-examples" class="tocxref">8.2 Example of margins, padding, and borders</a> <li class="tocline2"><a href="box.html#margin-properties" class="tocxref">8.3 Margin properties: <span class="propinst-margin-top">'margin-top'</span>, <span class="propinst-margin-right">'margin-right'</span>, <span class="propinst-margin-bottom">'margin-bottom'</span>, <span class="propinst-margin-left">'margin-left'</span>, and <span class="propinst-margin">'margin'</span></a> <ul class="toc"> <li class="tocline3"><a href="box.html#collapsing-margins" class="tocxref">8.3.1 Collapsing margins</a> </ul> <li class="tocline2"><a href="box.html#padding-properties" class="tocxref">8.4 Padding properties: <span class="propinst-padding-top">'padding-top'</span>, <span class="propinst-padding-right">'padding-right'</span>, <span class="propinst-padding-bottom">'padding-bottom'</span>, <span class="propinst-padding-left">'padding-left'</span>, and <span class="propinst-padding">'padding'</span></a> <li class="tocline2"><a href="box.html#border-properties" class="tocxref">8.5 Border properties</a> <ul class="toc"> <li class="tocline3"><a href="box.html#border-width-properties" class="tocxref">8.5.1 Border width: <span class="propinst-border-top-width">'border-top-width'</span>, <span class="propinst-border-right-width">'border-right-width'</span>, <span class="propinst-border-bottom-width">'border-bottom-width'</span>, <span class="propinst-border-left-width">'border-left-width'</span>, and <span class="propinst-border-width">'border-width'</span></a> <li class="tocline3"><a href="box.html#border-color-properties" class="tocxref">8.5.2 Border color: <span class="propinst-border-top-color">'border-top-color'</span>, <span class="propinst-border-right-color">'border-right-color'</span>, <span class="propinst-border-bottom-color">'border-bottom-color'</span>, <span class="propinst-border-left-color">'border-left-color'</span>, and <span class="propinst-border-color">'border-color'</span></a> <li class="tocline3"><a href="box.html#border-style-properties" class="tocxref">8.5.3 Border style: <span class="propinst-border-top-style">'border-top-style'</span>, <span class="propinst-border-right-style">'border-right-style'</span>, <span class="propinst-border-bottom-style">'border-bottom-style'</span>, <span class="propinst-border-left-style">'border-left-style'</span>, and <span class="propinst-border-style">'border-style'</span></a> <li class="tocline3"><a href="box.html#border-shorthand-properties" class="tocxref">8.5.4 Border shorthand properties: <span class="propinst-border-top">'border-top'</span>, <span class="propinst-border-bottom">'border-bottom'</span>, <span class="propinst-border-right">'border-right'</span>, <span class="propinst-border-left">'border-left'</span>, and <span class="propinst-border">'border'</span></a> </ul> </ul></div><P>The CSS box model describes the rectangular boxes that aregenerated for elements in the <a href="conform.html#doctree">documenttree</a> and laid out according to the <a href="visuren.html">visual formattingmodel</a>. The <A href="page.html">page box</A> is a special kind ofbox that is described in detail in the section on <Ahref="page.html">paged media</a>.<H2>8.1 <a name="box-dimensions">Box dimensions</a></H2> <P>Each box has a<span class="index-def" title="box::content|content::of a box"><a name="box-content-area"><dfn>content area</dfn></a></span> (e.g.,text, an image, etc.) and optional surrounding <span class="index-def" title="box::padding|padding::of a box"><a name="box-padding-area"><dfn>padding</dfn></a></span>,<span class="index-def" title="box::border|border::of a box"><a name="box-border-area"><dfn>border</dfn></a></span>, and <span class="index-def" title="box::margin|margin::of a box"><a name="box-margin-area"><dfn>margin</dfn></a></span> areas; the sizeof each area is specified by properties defined below. The followingdiagram shows how these areas relate and the terminology used to referto pieces of margin, border, and padding:</P><div class="figure"><P><img src="./images/boxdim.gif" alt="Image illustrating the relationship between content, padding, borders, and margins."><SPAN class="dlink"> <A name="img-boxdim" href="images/longdesc/boxdim-desc.html" title="Long description of illustration of box areas">[D]</A></SPAN></P></div><P>The margin, border, and padding can be broken down into left,right, top, and bottom segments (e.g., in the diagram, "LM" for leftmargin, "RP" for right padding, "TB" for top border, etc.).<P>The perimeter of each of the four areas (content, padding, border,and margin) is called an "edge", so each box has four edges:</P><dl><dt><span class="index-def"title="content edge"><a name="content-edge"><strong>content edge</strong></a></span>or <span class="index-def" title="inner edge"><a name="inner-edge"><strong>inner edge</strong></a></span><dd>The content edge surrounds the element's <a href="conform.html#rendered-content">rendered content</a>.<dt><span class="index-def" title="padding edge"><a name="padding-edge"><strong>padding edge</strong></a></span><dd>The padding edge surrounds the box padding. If the paddinghas 0 width, the padding edge is the same as the content edge.The padding edge of a box defines the edges of the<a href="visuren.html#containing-block">containing block</a> established by the box.<dt><span class="index-def" title="border edge"><a name="border-edge"><strong>border edge</strong></a></span><dd>The border edge surrounds the box's border. If the borderhas 0 width, the border edge is the same as the padding edge.<dt><span class="index-def" title="margin edge"><a name="margin-edge"><strong>margin edge</strong></a></span>or <span class="index-def" title="outer edge"><a name="outer-edge"><strong>outeredge</strong></a></span><dd>The margin edge surrounds the box margin. If the marginhas 0 width, the margin edge is the same as the border edge.</dl><P>Each edge may be broken down into a left, right, top, and bottomedge. <P>The dimensions of the content area of a box -- the <spanclass="index-def" title="box::content width"><aname="content-width"><dfn>content width</dfn></a></span> and <spanclass="index-def" title="box::content height"><aname="content-height"><dfn>content height</dfn></a></span> -- depend on several factors: whether the element generatingthe box has the <a href="visudet.html#propdef-width" class="noxref"><span class="propinst-width">'width'</span></a>or <a href="visudet.html#propdef-height" class="noxref"><span class="propinst-height">'height'</span></a> propertyset, whether the box contains text or other boxes, whether thebox is a table, etc. Box widths and heights are discussedin the chapter on <a href="visudet.html">visual formattingmodel details</a>.<P>The <span class="index-def" title="box::width"><aname="the-box-width"><dfn>box width</dfn></a></span> is given by thesum of the left and right margins, border, and padding, and thecontent width. The <span class="index-def" title="box::height"><aname="the-box-height"><dfn>height</dfn></a></span> is given by the sumof the top and bottom margins, border, and padding, and the contentheight.<P>The background style of the various areas of a box are determinedas follows:</p><ul><li><em>Content area</em>: The <a href="colors.html#propdef-background" class="noxref"><spanclass="propinst-background">'background'</span></a> property of the generating element.<li><em>Padding area</em>: The <a href="colors.html#propdef-background" class="noxref"><spanclass="propinst-background">'background'</span></a> property of the generating element.<li><em>Border area</em>: The <a href="#border-properties">border properties</a> of the generating element.<li><em>Margin area</em>: Margins are always transparent.</ul><H2>8.2 <a name="mpb-examples">Example of margins, padding, and borders</a></H2> This example illustrates how margins, padding, and bordersinteract. The example HTML document:<PRE class="html-example"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><HTML> <HEAD> <TITLE>Examples of margins, padding, and borders</TITLE> <STYLE type="text/css"> UL { background: green; margin: 12px 12px 12px 12px; padding: 3px 3px 3px 3px; /* No borders set */ } LI { color: black; /* text color is black */ background: gray; /* Content, padding will be gray */ margin: 12px 12px 12px 12px; padding: 12px 0px 12px 12px; /* Note 0px padding right */ list-style: none /* no glyphs before a list item */ /* No borders set */ } LI.withborder { border-style: dashed; border-width: medium; /* sets border width on all sides */ border-color: black; } </STYLE> </HEAD> <BODY> <UL> <LI>First element of list <LI class="withborder">Second element of list is longer to illustrate wrapping. </UL> </BODY></HTML></PRE><P>results in a <a href="conform.html#doctree">document tree</a> with(among other relationships) a UL element that has two LIchildren. <P>The first of the following diagrams illustrates what this examplewould produce. The second illustrates the relationship between themargins, padding, and borders of the UL elements and those of itschildren LI elements.</P><div class="figure"><P><img src="./images/boxdimeg.gif" alt="Image illustrating how parent and child margins, borders,and padding relate."><SPAN class="dlink"> <A name="img-boxdimeg" href="images/longdesc/boxdimeg-desc.html" title="Long description of list box example showing margins,padding, and borders">[D]</A></SPAN></p></div><P>Note that:</p><ul><li>The <a href="#content-width">content width</a> for each LI box iscalculated top-down; the <a href="visuren.html#containing-block">containingblock</a> for each LI box is established by the UL element.<li>The height of each LI box is given by its <ahref="#content-height">content height</a>, plus top and bottompadding, borders, and margins. Note that vertical margins between theLI boxes <a href="#collapsing-margins">collapse.</a><li>The right padding of the LI boxes has been set to zero width(the <a href="box.html#propdef-padding" class="noxref"><span class="propinst-padding">'padding'</span></a> property). Theeffect is apparent in the second illustration.<li>The margins of the LI boxes are transparent -- margins are alwaystransparent -- so the background color (green) of the UL padding andcontent areas shines through them. <li>The second LI element specifies a dashed border (the<a href="box.html#propdef-border-style" class="noxref"><span class="propinst-border-style">'border-style'</span></a> property).</ul><H2>8.3 <a name="margin-properties">Margin properties</a>:<a href="box.html#propdef-margin-top" class="noxref"><span class="propinst-margin-top">'margin-top'</span></a>, <a href="box.html#propdef-margin-right" class="noxref"><span class="propinst-margin-right">'margin-right'</span></a>, <a href="box.html#propdef-margin-bottom" class="noxref"><span class="propinst-margin-bottom">'margin-bottom'</span></a>,<a href="box.html#propdef-margin-left" class="noxref"><span class="propinst-margin-left">'margin-left'</span></a>, and<a href="box.html#propdef-margin" class="noxref"><span class="propinst-margin">'margin'</span></a></H2>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -