上一页   下一页   目录   属性   索引  

11 视觉效果

内容

11.1 溢出和剪裁

通常，块框的内容被限制在框的内容边缘内。在某些情况下，框可能会溢出，即其内容部分或全部在框外，例如：

当溢出发生时，'overflow'属性指定是否将框剪裁到其填充边缘，如果是，是否提供滚动机制以访问任何被剪裁的内容。

11.1.1 溢出：'overflow' 属性

名称: overflow
值: visible | hidden | scroll | auto | inherit
初始值: visible
适用于: 块容器和建立格式化上下文的框
是否继承: no
百分比: N/A
媒体: 视觉
计算值: 按指定值

该属性指定当块容器元素的内容溢出元素的框时，是否剪裁内容。它影响元素的所有内容的剪裁，除了任何其包含块是视口或元素祖先的后代元素（及其各自的内容和后代）。值具有以下含义：

visible
此值表示内容未被剪裁，即可能会在块框外呈现。
hidden
此值表示内容被剪裁，不应提供滚动用户界面以查看剪裁区域外的内容。
scroll
此值表示内容被剪裁，如果用户代理使用的是屏幕上可见的滚动机制（例如滚动条或定位器），则应显示此机制，无论是否剪裁了内容。这可以避免在动态环境中滚动条出现和消失的问题。当指定此值且目标介质为'print'时，溢出的内容可能会被打印。当用于表框时，此值的含义与'visible'相同。
auto
'auto'值的行为取决于用户代理，但应导致为溢出的框提供滚动机制。当用于表框时，此值的含义与'visible'相同。

即使'overflow'设置为'visible'，内容也可能会被本机操作环境剪裁到用户代理的文档窗口中。

在表元素（'display: table'）上，'overflow'适用于表框（即不适用于表包装框），并且除'hidden'之外的所有值都被视为'visible'。

用户代理必须将设置在根元素上的'overflow'属性应用于视口。当根元素为HTML的“HTML”元素或XHTML的“html”元素，并且该元素有一个HTML的“BODY”元素或XHTML的“body”元素作为子元素时，用户代理必须改为将第一个这样的子元素上的'overflow'属性应用于视口，如果根元素上的值为'visible'。当用于视口时，'visible'值必须被解释为'auto'。值被传播的元素必须具有'overflow'的使用值为'visible'。

如果在元素框的边缘上放置了一个滚动条，则应将其插入到内边框边缘和外填充边缘之间。滚动条占据的任何空间应从由带有滚动条的元素形成的包含块的尺寸中减去。

示例:

考虑以下块引用（<blockquote>）的示例，它对于包含块来说太大了。以下是源代码：


<div>
<blockquote>
<p>我不喜欢这个剧，但我在不利的条件下看的——幕布已升起。</p>
<cite>- 格劳乔·马克思</cite>
</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
      }

cite { display: block;
       text-align : right; 
       border: none
       }

'overflow'的初始值为'visible'，因此<blockquote>将会格式化为不剪裁，类似于这样：

未剪裁的溢出   [D]

另一方面，将<div>的'overflow'设置为'hidden'，则<blockquote>将会被包含的<div>剪裁：

剪裁的溢出   [D]

'scroll'值将告诉支持可见滚动机制的用户代理显示一个，以便用户可以访问被剪裁的内容。

最后，考虑这种将绝对定位元素与溢出父元素混合的情况。

样式表：


  container { position: relative; border: solid; }
  scroller { overflow: scroll; height: 5em; margin: 5em; }
  satellite { position: absolute; top: 0; }
  body { height: 10em; }

文档片段：


  <container>
   <scroller>
    <satellite/>
    <body/>
   </scroller>
  </container>

在此示例中，“scroller”元素不会滚动“satellite”元素，因为后者的包含块位于剪裁和滚动的元素之外。

11.1.2 剪裁：'clip' 属性

一个剪裁区域定义了元素边框框中可见的部分。默认情况下，元素不会被剪裁。然而，剪裁区域可以通过'clip'属性显式设置。

名称: clip
值: <shape> | auto | inherit
初始值: auto
适用于: 绝对定位的元素
是否继承: no
百分比: N/A
媒体: 视觉
计算值: 如果指定为'auto'，则为'auto'，否则为带有四个值的矩形，每个值如果指定为'auto'，则为'auto'，否则为计算出的长度

'clip'属性仅适用于绝对定位的元素。值具有以下含义：

auto
元素不进行剪裁。
<shape>
在CSS 2.2中，唯一有效的<shape>值是：rect(<top>, <right>, <bottom>, <left>) 其中<top>和<bottom>指定从框顶部边框边缘的偏移量，而<right>和<left>指定从框左边框边缘的偏移量。作者应使用逗号分隔偏移值。用户代理必须支持逗号分隔，但也可以支持不带逗号的分隔（但不能混合使用），因为本规范的先前版本在这一点上是模棱两可的。

<top>、<right>、 <bottom>和<left>可以具有<length>值或'auto'。允许使用负长度。'auto'值表示剪裁区域的某个边缘将与元素的生成边框框的边缘相同（即，'auto'表示对于<top>和<left>来说等同于'0'，对于<bottom>，则等同于使用值的高度加上垂直填充和边框宽度之和，对于<right>，则等同于使用值的宽度加上水平填充和边框宽度之和，因此四个'auto'值将导致剪裁区域与元素的边框框相同）。

当坐标四舍五入为像素坐标时，应注意当<left>和<right>具有相同的值（或<top>和<bottom>具有相同的值）时，不会有像素可见，反之当这些值为'auto'时，元素边框框内的像素不会被隐藏。

元素的剪裁区域会剪裁掉元素的任何部分（例如，内容、子元素、背景、边框、文本装饰、轮廓和可见滚动机制——如果有的话），这些部分位于剪裁区域之外。被剪裁的内容不会导致溢出。

元素的祖先也可能剪裁其内容的一部分（例如，通过它们自己的'clip'属性和/或如果它们的'overflow'属性不是'visible'）；渲染的内容是累积的交集。

如果剪裁区域超过了用户代理文档窗口的边界，则内容可能会被本机操作环境剪裁到该窗口中。

示例:

示例：以下两条规则：

p#one { clip: rect(5px, 40px, 45px, 5px); }
p#two { clip: rect(5px, 55px, 45px, 5px); }

假设两个段落都是50x55像素，将分别创建由以下插图中的虚线限定的矩形剪裁区域：

两个剪裁区域   [D]

注意。 在CSS 2.2中，所有剪裁区域都是矩形的。我们预期未来的扩展将允许非矩形剪裁。未来的更新可能还会重新引入一种语法，用于从每个边缘偏移形状，而不是从一个点偏移。

11.2 可见性：'visibility' 属性

名称: visibility
值: visible | hidden | collapse | inherit
初始值: visible
适用于: 所有元素
是否继承: yes
百分比: N/A
媒体: 视觉
计算值: 按指定值

'visibility'属性指定元素生成的框是否被渲染。不可见的框仍然影响布局（将'display'属性设置为'none'以完全抑制框生成）。值具有以下含义：

visible
生成的框是可见的。
hidden
生成的框不可见（完全透明，不绘制任何内容），但仍然影响布局。此外，如果后代元素的'visibility'属性为'visible'，则它们仍然可见。
collapse
请查阅关于表格中动态行和列效果的部分。如果用于行、行组、列或列组以外的元素，则'collapse'的含义与'hidden'相同。

此属性可与脚本结合使用以创建动态效果。

在以下示例中，按下任一表单按钮都会调用作者定义的脚本函数，使相应的框变为可见，另一个框变为隐藏。由于这些框具有相同的大小和位置，效果是一个替换另一个。（脚本代码是一个假设的脚本语言。它可能在支持CSS的用户代理中有作用，也可能没有。） 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD><TITLE>动态可见性示例</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>选择一个嫌疑人:</P>
<DIV id="container1">
   <IMG alt="阿尔·卡彭" 
        width="100" height="100" 
        src="suspect1.png">
   <P>姓名: 阿尔·卡彭</P>
   <P>居住地: 芝加哥</P>
</DIV>

<DIV id="container2">
   <IMG alt="幸运的卢西亚诺" 
        width="100" height="100" 
        src="suspect2.png">
   <P>姓名: 幸运的卢西亚诺</P>
   <P>居住地: 纽约</P>
</DIV>

<FORM method="post" 
      action="http://www.suspect.org/process-bums">
   <P>
   <INPUT name="Capone" type="button" 
          value="卡彭" 
          onclick='show("container1");hide("container2")'>
   <INPUT name="Luciano" type="button" 
          value="卢西亚诺" 
          onclick='show("container2");hide("container1")'>
</FORM>
</BODY>
</HTML>

上一页   下一页   目录   属性   索引