📄 visufx.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 effects</title><link rel="stylesheet" href="style/default.css" type="text/css"><link rel="prev" href="visudet.html"><link rel="next" href="generate.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="visudet.html">previous</a> <a href="generate.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">11 Visual effects</h1><div class="subtoc"><p><strong>Contents</strong> <ul class="toc"> <li class="tocline2"><a href="visufx.html#overflow-clipping" class="tocxref">11.1 Overflow and clipping</a> <ul class="toc"> <li class="tocline3"><a href="visufx.html#overflow" class="tocxref">11.1.1 Overflow: the <span class="propinst-overflow">'overflow'</span> property</a> <li class="tocline3"><a href="visufx.html#clipping" class="tocxref">11.1.2 Clipping: the <span class="propinst-clip">'clip'</span> property</a> </ul> <li class="tocline2"><a href="visufx.html#visibility" class="tocxref">11.2 Visibility: the <span class="propinst-visibility">'visibility'</span> property</a> </ul></div><H2>11.1 <a name="overflow-clipping">Overflow and clipping</a></H2><P>Generally, the content of a block box is confined to thecontent edges of the box. In certain cases, a box may <a name="x0"><spanclass="index-def"title="overflow|box::overflow"><dfn>overflow</dfn></span></a>, meaning itscontent lies partly or entirely outside of the box, e.g.:</P><ul><li>A line cannot be broken, causing the line box to be wider than theblock box.<li>A block-level box is too wide for the containing block. This mayhappen when anelement's <a href="visudet.html#propdef-width" class="noxref"><span class="propinst-width">'width'</span></a> property has avalue that causes the generated block box to spill oversides of the containing block.<li>An element's height exceeds an explicit height assigned to the containingblock (i.e., the containing block's height is determined by the <a href="visudet.html#propdef-height" class="noxref"><spanclass="propinst-height">'height'</span></a> property, not by contentheight).<li>A box is <a href="visuren.html#absolute-positioning">positionedabsolutely</a>.<li>It has <a href="box.html#margin-properties">negative margins</a>.</ul><p>Whenever overflow occurs, the <a href="visufx.html#propdef-overflow" class="noxref"><spanclass="propinst-overflow">'overflow'</span></a> property specifies how(and whether) abox is clipped. The <a href="visufx.html#propdef-clip" class="noxref"><span class="propinst-clip">'clip'</span></a> propertyspecifies the size and shape of the clipping region. Specifying asmall clipping region may cause clipping of otherwise visiblecontents.<H3>11.1.1 <a name="overflow">Overflow</a>: the <a href="visufx.html#propdef-overflow" class="noxref"><spanclass="propinst-overflow">'overflow'</span></a> property</H3><div class="propdef"><dl><dt><span class="index-def" title="'overflow'"><a name="propdef-overflow" class="propdef-title"><strong>'overflow'</strong></a></span><dd><table class="propinfo" cellspacing=0 cellpadding=0><tr valign=baseline><td><em>Value:</em> <td>visible | hidden | scroll | 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>visible<tr valign=baseline><td><em>Applies to:</em> <td>block-level and replaced elements<tr valign=baseline><td><em>Inherited:</em> <td>no<tr valign=baseline><td><em>Percentages:</em> <td>N/A<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 whether the content of a block-levelelement is clipped when it overflows the element's box (which isacting as a containing block for the content). Values have thefollowing meanings:</p><dl><dt><strong>visible</strong> <dd>This value indicates that content is not clipped, i.e., itmay be rendered outside the block box. <dt><strong>hidden</strong> <dd>This value indicates that the content is clipped and that noscrolling mechanism should be provided to view the content outside theclipping region; users will not have access to clippedcontent. The size and shape of the clipping region is specifiedby the <a href="visufx.html#propdef-clip" class="noxref"><span class="propinst-clip">'clip'</span></a> property.<dt><strong>scroll</strong> <dd>This value indicates that the content is clipped and that if theuser agent uses scrolling mechanism that is visible on the screen(such as a scroll bar or a panner), that mechanism should be displayedfor a box whether or not any of its content is clipped. This avoidsany problem with scrollbars appearing and disappearing in a dynamicenvironment. When this value is specified and the target medium is'print' or 'projection', overflowing content should be printed.<dt><strong>auto</strong> <dd>The behavior of the 'auto' value is user agent-dependent, butshould cause a scrolling mechanism to be provided for overflowing boxes.</dl><P> Even if <a href="visufx.html#propdef-overflow" class="noxref"><span class="propinst-overflow">'overflow'</span></a> is setto 'visible', content may be clipped to a UA's document window by thenative operating environment.<div class="example"><P style="display:none">Example(s):</P><P>Consider the following example of a block quotation(BLOCKQUOTE) that is too bigfor its containing block (established by a DIV). Here isthe source document:</p><PRE class="html-example"><DIV><BLOCKQUOTE><P>I didn't like the play, but then I sawit under adverse conditions - the curtain was up.<DIV class="attributed-to">- Groucho Marx</DIV></BLOCKQUOTE></DIV></PRE><P>Here is the style sheet controlling the sizes and style of thegenerated boxes:<PRE>DIV { width : 100px; height: 100px; border: thin solid red; }BLOCKQUOTE { width : 125px; height : 100px; margin-top: 50px; margin-left: 50px; border: thin dashed black }DIV.attributed-to { text-align : right; }</PRE><P>The initial value of <a href="visufx.html#propdef-overflow" class="noxref"><spanclass="propinst-overflow">'overflow'</span></a> is 'visible', sothe BLOCKQUOTE would be formatted without clipping, something like this:</P><div class="figure"><P><img src="./images/overflow1.gif" alt="Rendered overflow"><SPAN class="dlink"> <A name="img-overflow1" href="images/longdesc/overflow1-desc.html" title="Long description for example with unclipped overflow">[D]</A></SPAN></p></div><P>Setting <a href="visufx.html#propdef-overflow" class="noxref"><span class="propinst-overflow">'overflow'</span></a> to'hidden' for the DIV element, on the other hand, causes theBLOCKQUOTE to be clipped by the containing block:<div class="figure"><P><img src="./images/overflow2.gif" alt="Clipped overflow"><SPAN class="dlink"> <A name="img-overflow2" href="images/longdesc/overflow2-desc.html" title="Long description for example with clipped overflow">[D]</A></SPAN></p></div><P>A value of 'scroll' would tell UAs that support a visible scrolling mechanism to display one so that userscould access the clipped content.</div><H3>11.1.2 <a name="clipping">Clipping</a>: the <a href="visufx.html#propdef-clip" class="noxref"><spanclass="propinst-clip">'clip'</span></a> property</h3><p>A <a name="x3"><span class="index-def" title="clipping region"><dfn>clippingregion</dfn></span></a> defines what portion of an element's <ahref="conform.html#rendered-content">rendered content</a> isvisible. By default, the clipping region has the same size and shapeas the element's box(es). However, the clipping region may bemodified by the <a href="visufx.html#propdef-clip" class="noxref"><span class="propinst-clip">'clip'</span></a> property.<div class="propdef"><dl><dt><span class="index-def" title="'clip'"><a name="propdef-clip" class="propdef-title"><strong>'clip'</strong></a></span><dd><table class="propinfo" cellspacing=0 cellpadding=0>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -