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)whether a box is clipped. The 'clip' property specifies the sizeclipped to its padding edge, and shape of the clipping region. Specifyingif so, whether
a small clipping region may cause clipping of otherwise visible contents.scrolling mechanism is provided to access any clipped out content.
Value: | visible | hidden | scroll | auto | inherit |
Initial: | visible |
Applies to: | non-replaced block-level elements, table cells, and |
Inherited: | no |
Percentages: | N/A |
Media: | visual |
Computed value: | as specified |
This property specifies whether thecontent of a block-level element is
clipped when it overflows the element's box (which is acting as abox. It affects the clipping
of all of the element's content except any descendant elements (and
their respective content and descendants) whose containing block foris the viewport or an ancestor of the content).element. 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.
UAs must apply the 'overflow' property set on the root element to the viewport. HTML UAs must instead apply the 'overflow' property from the BODY element to the viewport, if the value on the HTML element is 'visible'. The 'visible' value when used for the viewport must be interpreted as 'auto'. The element from which the value is propagated must have a used value for 'overflow' of 'visible'.
In the case of a scrollbar being placed on an edge of the element's box, it should be inserted between the inner border edge and the outer padding edge. Any space taken up by the scrollbars should be subtracted from the computed width/height, thus preserving the inner border edge.
Consider the following example of a block quotation
(BLOCKQUOTE)(<blockquote>
) that is too big
for its containing block (established by a
). Here is
the DIV).<div>source document:source:
<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">-up.</p>
<cite>- Groucho Marx</DIV>Marx</cite>
</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-tocite { display: block;
text-align : right;
border: none
}
The initial value of 'overflow' is 'visible', so
the
would be formatted without clipping, something like this:BLOCKQUOTE<blockquote>
Setting 'overflow' to
'hidden' for the
, on the other hand, causes the
DIV element,<div>
to be clipped by the containing block:
BLOCKQUOTE<blockquote>
A value of 'scroll' would tell UAs that support a visible scrolling mechanism to display one so that users could access the clipped content.
11.1.2 Clipping : the 'clip' property A clipping region defines what portion of an element's rendered contentFinally, consider this case where an absolutely positioned element
is visible. By default,mixed with an overflow parent.
Stylesheet:
container { position: relative; border: solid; }
scroller { overflow: scroll; height: 5em; margin: 5em; }
satellite { position: absolute; top: 0; }
body { height: 10em; }
Document fragment:
<container>
<scroller>
<satellite/>
<body/>
</scroller>
</container>
In this example, the clipping region has"scroller" element will not scroll the
same size"satellite" element, because the latter's containing block is outside
the element whose overflow is being clipped and shape asscrolled.
A clipping
region defines what portion of an element's
box(es).border box
is visible. By default, the element is not clipped. However, the clipping region may be modified byexplicitly set with the 'clip' property.
The 'clip' property applies only to elements that have a 'overflow' property with a value other than 'visible'.absolutely positioned elements.
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 border box (i.e., 'auto' means the same as '0'.)'0' for <top> and <left> (in left-to-right text,
<right> in right-to-left
text), the same as the computed value of the height plus the sum of
vertical padding and border widths for <bottom>, and the same as the
computed value of the width plus the sum of the horizontal padding and
border widths for <right>
(in left-to-right text, <left> in right-to-left text),
such that four 'auto' values result in the clipping region being
the same as the element's border box).
When coordinates are rounded to pixel coordinates, care should be
taken that no pixels remain visible when <left> +and
<right> is equal tohave the element's widthsame value (or <top> +and <bottom>
equalshave the element's height),same value), and conversely that no pixels within the
element's border box remain hidden when these values are 0.'auto'.
An element's clipping region clips out any aspect of the element (e.g. content, children, background, borders, text decoration, outline and visible scrolling mechanism — if any) that is outside the clipping region.
The element's ancestors may also have clipping regions (in caseclip portions of their content (e.g. via their own 'clip' property and/or if
their 'overflow' property is
not 'visible'); what is rendered is the intersection of the various clipping regions.cumulative intersection.
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,40px, 45px, 5px); }
p { clip: rect(5px, -5px, 10px,55px, 45px, 5px); }
will create the rectangular clipping regions delimited by the dashed lines in the following illustrations:
Note. In CSS2,CSS 2.1, all clipping
regions are rectangular. We anticipate future extensions to permit
non-rectangular clipping. Future updates may also reintroduce a
syntax for offsetting shapes from each edge instead of offsetting from
a point.
Value: | visible | hidden | collapse | inherit |
Initial: | |
Applies to: | all elements |
Inherited: | |
Percentages: | N/A |
Media: | visual |
Computed value: | as specified |
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-definedan author-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">4.01//EN">
<HTML>
<HEAD><HEAD><TITLE>Dynamic visibility example</TITLE>
<META
http-equiv="Content-Script-Type"
content="application/x-hypothetical-scripting-language">
<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">src="suspect1.png">
<P>Name: Al Capone</P>
<P>Residence: Chicago</P>
</DIV>
<DIV id="container2">
<IMG alt="Lucky Luciano"
width="100" height="100"
src="suspect2.jpg">src="suspect2.png">
<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>