Документ взят из кэша поисковой машины. Адрес
оригинального документа
: http://crydee.sai.msu.ru/~vab/html.doc/css2/visufx.html
Дата изменения: Tue May 12 12:28:48 1998 Дата индексирования: Tue Oct 2 02:15:13 2012 Кодировка: Поисковые слова: п п п п п п п п п |
Contents
Generally, the content of a block box is confined to the content edges of the box. In certain cases, a box may overflow, meaning its content lies partly or entirely outside of the box, e.g.:
Whenever overflow occurs, the 'overflow' property specifies how (and whether) a box is clipped. The 'clip' property specifies the size and shape of the clipping region. Specifying a small clipping region may cause clipping of otherwise visible contents.
Value: | visible | hidden | scroll | auto | inherit |
Initial: | visible |
Applies to: | block-level and replaced elements |
Inherited: | no |
Percentages: | N/A |
Media: | visual |
This property specifies whether the content of a block-level element is clipped when it overflows the element's box (which is acting as a containing block for the content). Values have the following meanings:
Even if 'overflow' is set to 'visible', content may be clipped to a UA's document window by the native operating environment.
Consider the following example of a block quotation (BLOCKQUOTE) that is too big for its containing block (established by a DIV). Here is the source document:
<DIV> <BLOCKQUOTE> <P>I didn't like the play, but then I saw it under adverse conditions - the curtain was up. <DIV class="attributed-to">- Groucho Marx</DIV> </BLOCKQUOTE> </DIV>
Here is the style sheet controlling the sizes and style of the generated boxes:
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; }
The initial value of 'overflow' is 'visible', so the BLOCKQUOTE would be formatted without clipping, something like this:
Setting 'overflow' to 'hidden' for the DIV element, on the other hand, causes the BLOCKQUOTE to be clipped by the containing block:
A value of 'scroll' would tell UAs that support a visible scrolling mechanism to display one so that users could access the clipped content.
A clipping region defines what portion of an element's rendered content is visible. By default, the clipping region has the same size and shape as the element's box(es). However, the clipping region may be modified by the 'clip' property.
The 'clip' property applies to elements that have a 'overflow' property with a value other than 'visible'. Values have the following meanings:
<top>, <right>, <bottom>, and <left> may either have a <length> value or 'auto'. Negative lengths are permitted. The value 'auto' means that a given edge of the clipping region will be the same as the edge of the element's generated box (i.e., 'auto' means the same as '0'.)
When coordinates are rounded to pixel coordinates, care should be taken that no pixels remain visible when <left> + <right> is equal to the element's width (or <top> + <bottom> equals the element's height), and conversely that no pixels remain hidden when these values are 0.
The element's ancestors may also have clipping regions (in case their 'overflow' property is not 'visible'); what is rendered is the intersection of the various clipping regions.
If the clipping region exceeds the bounds of the UA's document window, content may be clipped to that window by the native operating environment.
The following two rules:
P { clip: rect(5px, 10px, 10px, 5px); } P { clip: rect(5px, -5px, 10px, 5px); }
will create the rectangular clipping regions delimited by the dashed lines in the following illustrations:
Note. In CSS2, all clipping regions are rectangular. We anticipate future extensions to permit non-rectangular clipping.
Value: | visible | hidden | collapse | inherit |
Initial: | inherit |
Applies to: | all elements |
Inherited: | no |
Percentages: | N/A |
Media: | visual |
The 'visibility' property specifies whether the boxes generated by an element are rendered. Invisible boxes still affect layout (set the 'display' property to 'none' to suppress box generation altogether). Values have the following meanings:
This property may be used in conjunction with scripts to create dynamic effects.
In the following example, pressing either form button invokes a user-defined script function that causes the corresponding box to become visible and the other to be hidden. Since these boxes have the same size and position, the effect is that one replaces the other. (The script code is in a hypothetical script language. It may or may not have any effect in a CSS-capable UA.)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <STYLE type="text/css"> <!-- #container1 { position: absolute; top: 2in; left: 2in; width: 2in } #container2 { position: absolute; top: 2in; left: 2in; width: 2in; visibility: hidden; } --> </STYLE> </HEAD> <BODY> <P>Choose a suspect:</P> <DIV id="container1"> <IMG alt="Al Capone" width="100" height="100" src="suspect1.jpg"> <P>Name: Al Capone</P> <P>Residence: Chicago</P> </DIV> <DIV id="container2"> <IMG alt="Lucky Luciano" width="100" height="100" src="suspect2.jpg"> <P>Name: Lucky Luciano</P> <P>Residence: New York</P> </DIV> <FORM method="post" action="http://www.suspect.org/process-bums"> <P> <INPUT name="Capone" type="button" value="Capone" onclick='show("container1");hide("container2")'> <INPUT name="Luciano" type="button" value="Luciano" onclick='show("container2");hide("container1")'> </FORM> </BODY> </HTML>