11 视觉效果
通常情况下，块的内容由框的边包围。某些情况下，一个框可能溢出，即它的内容部分或全部在框的外面，例如：
- 一条线可能被分割，使线框比块框宽。
- 块类框太宽而包含块容纳不下。可能是由于一个元素的'width'属性设置了一个值而使生成的块框超出了包含块的边。
- 一个元素的高度超过了显式地指定给它的包含块的高度（即包含块的高度由'height'属性指定，而不是由内容高度指定）。
- 一个框绝对定位。
- 具有负的边距。
一旦有溢出产生，'overflow'属性指定一个框如何（以及是否）被剪切。'clip'属性指定了剪切区域的尺寸和形状。指定一个小的剪切区域可能造成否则可见的内容被剪切。
-
'overflow'
-
| 值： | visible | hidden | scroll | auto | inherit
|
| 初始值： | visible
|
| 适用于： | 块类和替换元素
|
| 可否继承： | 否
|
| 百分比： | N/A
|
| 媒介： | 图形
|
该属性指定当一个块类元素的内容溢出了元素的框（它作为内容的包含块）时，是否剪切。取值含义如下：
- visible
- 该值规定内容不被剪切，即它可以在块框之外得到渲染。
- hidden
- 该值规定内容被剪切而且对于剪切区域之外的内容不提供滚动机制而得到浏览；用户无法访问被剪切的内容。剪切区域的尺寸和形状由'clip'属性指定。
- scroll
- 该值规定内容被剪切，而如果用户端使用屏幕上可见的滚动机制（如滚动条或偏移条），不管它的内容是否剪切，该机制应该被显示。这避免了在动态环境中滚动条一会出现一会消失的问题。如果设置了该值而目标媒介是'print'或'projection'，溢出部分的内容应该被打印。
- auto
- 'auto'值的表现取决于用户端，但是对于溢出的框应该提供一个滚动机制。
即使'overflow'设置为'visible'，内容也可能被操作系统剪切到用户端的文档窗口中。
例子：
考虑如下的引用块（BLOCKQUOTE），它相对它的包含块（由DIV创建）来说太大了。下面是源文档：
<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>
下面是控制生成框的尺寸和样式的样式表：
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; }
'overflow'的初始值是'visible'，因此BLOCKQUOTE格式化时不考虑剪切，结果可能是：
另一方面，将DIV元素的'overflow'设置为'hidden'，将根据包含块剪切BLOCKQUOTE：
'scroll'值将指示支持图形滚动机制的用户端显示一个滚动机制使用户可以访问被剪切的内容。
一个剪切区域定义了元素的经渲染的内容的哪一部分是可见的。缺省情况下，剪切区域和元素框的尺寸和形状是一样的。不过，剪切区域可以由'clip'属性改变。
'clip'属性适用于那些'overflow'属性不为'visible'的元素。取值的含义如下：
- auto
- 剪切区域和元素框的尺寸、位置相同。
- <shape>
- CSS2中，唯一合法的<shape>值是：rect（<top> <right> <bottom> <left>），其中<top>，<bottom>，<right>及<left>指定了相对于相应框的边的偏移。
<top>，<right>，<bottom>及<left>可以是一个<length>值或'auto'。也允许负数值。取值为'auto'意味着剪切区域的这一边和元素生成框的边一致（即'auto'意味着'0'。）
如果坐标近似到点坐标，需要小心的是，如果<left> + <right>等于元素的宽度（或<top> + <bottom>等于元素的高度）时，没有像素点可见；与之相反，如果这些值为0，将没有任何像素点被隐藏。
元素的前辈可能也有剪切区域（如果它们的'overflow'属性不是'visible'）；被渲染的部分是各剪切区域的交集。
如果剪切区域超出了用户端文档窗口的边界，操作系统可能将内容剪切到该窗口。
例子：
如下两个规则：
P { clip: rect(5px, 10px, 10px, 5px); }
P { clip: rect(5px, -5px, 10px, 5px); }
将产生如下图所示，由虚线包围的长方形剪切区域：
注意。在CSS2中，所有的剪切区域是长方形的。我们预期将来的扩展将允许非长方形的剪切。
'visibility'属性指定一个元素生成的框是否被渲染。不可见的框仍然影响布局（设置'display'属性为'none'将禁止框的生成）。取值含义如下：
- visible
- 生成的框是可见的。
- hidden
- 生成框是不可见的（完全透明），但仍然影响布局。
- collapse
- 请参见表格中的动态行列效果一节。如果使用在不是行列元素上，'collapse'的含义和'hidden'相同。
该属性可以和脚本协同使用而产生动态效果。
下例中，按下任意一个表单的按钮激发用户定义的脚本函数，使相应的框成为可见而另外一个不可见。由于这些框的尺寸和位置相同，看起来的效果是一个框替代了另外一个框。（脚本代码是假想的。在CSS兼容的用户端，它可能有用也可能没用。）
<!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>
