). Here is
the source:
I didn't like the play, but then I saw
it under adverse conditions - the curtain was up.
- Groucho Marx
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
}
cite { display: block;
text-align : right;
border: none
}
The initial value of 'overflow' is 'visible', so
the
Setting 'overflow' to
'hidden' for the , on the other hand, causes the
to be clipped by the containing
:
A value of 'scroll' would tell UAs that support
a visible scrolling mechanism to display one so that users
could access the clipped content.
Finally, consider this case where an absolutely positioned element
is mixed with an overflow parent.
Style sheet:
container { position: relative; border: solid; }
scroller { overflow: scroll; height: 5em; margin: 5em; }
satellite { position: absolute; top: 0; }
body { height: 10em; }
Document fragment:
In this example, the "scroller" element will not scroll the
"satellite" element, because the latter's containing block is outside
the element whose overflow is being clipped and scrolled.
A clipping
region defines what portion of an element's
border box
is visible. By default, the element is not clipped. However, the clipping region may be explicitly set with the 'clip' property.
-
'clip'
-
| Value: | | auto | inherit
|
| Initial: | auto
|
| Applies to: | absolutely positioned elements
|
| Inherited: | no
|
| Percentages: | N/A
|
| Media: | visual
|
| Computed value: | 'auto' if specified as 'auto', otherwise a rectangle with four
values, each of which is 'auto' if specified as 'auto' and the
computed length otherwise
|
The 'clip' property applies only to absolutely positioned elements.
Values have the following meanings:
- auto
- The element does not clip.
- In CSS 2.1, the only valid value is:
rect(, , , )
where and specify offsets from
the top border edge of the box, and , and specify offsets from the
left border edge of the box. Authors should separate
offset values with commas. User agents must support separation with
commas, but may also support separation without commas (but not a
combination), because a
previous revision of this specification was ambiguous in this respect.
, ,
,
and may
either have a
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' for and , the same as the used
value of the height plus the sum of
vertical padding and border widths for , and the same as the
used value of the width plus the sum of the horizontal padding and
border widths for ,
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 and
have the same value (or and
have the same value), and conversely that no pixels within the
element's border box remain hidden when these values are '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.
Content that has been clipped does not cause overflow.
The element's ancestors may also clip 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 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.
Example(s):
Example:
The following two rules:
p#one { clip: rect(5px, 40px, 45px, 5px); }
p#two { clip: rect(5px, 55px, 45px, 5px); }
and assuming both Ps are 50 by 55 px, will create, respectively,
the rectangular clipping regions delimited
by the dashed lines in the following illustrations:
Note. In 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.
-
'visibility'
-
| Value: | visible | hidden | collapse | inherit
|
| Initial: | visible
|
| Applies to: | all elements
|
| Inherited: | yes
|
| 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:
- visible
- The generated box is visible.
- hidden
- The generated box is invisible (fully transparent, nothing is drawn), but still
affects layout. Furthermore, descendants of the element will
be visible if they have 'visibility: visible'.
- collapse
- Please consult the section on
dynamic row and column
effects in tables. If used on elements other than rows, row groups, columns, or column groups,
'collapse' has the same meaning as 'hidden'.
This property may be used in conjunction with scripts to create
dynamic effects.
In the following example, pressing
either form button invokes an 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.)
Dynamic visibility example
Choose a suspect:
Name: Al Capone
Residence: Chicago
Name: Lucky Luciano
Residence: New York
