上一章   下一章   内容   属性   索引  

11 可视化效果

内容

11.1 溢出与裁剪

一般地，一个块盒的内容都被限制在该盒的内容边界内。某些情况下，一个盒可能会溢出，意味着它的部分内容或者全部内容位于该盒外部，例如：

出现溢出时，'overflow'属性指定了一个盒是否应该被裁剪到其内边距边界里，以及是否需要提供一种滚动机制来访问那些被裁剪掉的内容

11.1.1 溢出：'overflow'属性

'overflow'
Value:  visible | hidden | scroll | auto | inherit
Initial:  visible
Applies to:  块容器
Inherited:  no
Percentages:  N/A
Media:  visual
Computed value:  与指定值相同

该属性指定了块容器元素的内容从该元素的盒中溢出时是否需要裁剪。它会影响元素所有内容的裁剪，除了那些包含块是视口或该元素的祖先的后代元素，包括这些元素的内容及其后代。属性值含义如下：

visible
该值表示内容不会被裁剪，即，它可能会渲染在块盒外部
hidden
该值表示内容会被裁剪，但不会提供滚动的用户界面来查看裁剪区域外（clipping region）的内容
scroll
该值表示内容会被裁剪，而且如果用户代理使用一种在屏幕上保持可见的滚动机制（例如，一个滚动条或者抓手（译注：panner，应该是指类似于Photoshop中抓手工具的东西，作用与滚动条一样）），则无论其内容被裁剪与否，都应为该盒显示这种机制。这样就避免了动态环境中那些滚动条显示与不显示的问题。当指定了该值并且目标媒体为'print'时，溢出的内容可能会被打印出来
auto
'auto'值的行为是依赖用户代理的（user agent-dependent），但应该为溢出的盒提供一种滚动机制

即使把'overflow'设置为'visible'，内容也可能会被原生操作环境裁剪到UA的文档窗口中

UA必须把设置在根元素上的'overflow'属性应用到视口上。如果根元素是HTML的"HTML"元素或者XHTML的"html"元素，并且该元素具有一个作为子级的HTML的"BODY"元素或者XHTML的"body"元素的话，如果根元素上该值为'visible'，用户代理必须把第一个这种子级元素的'overflow'属性应用到视口上（而不是根元素的'overflow'）。'visible'用于视口时，必须解释为'auto'。该值被传播的元素必须具有应用值为'visible'的'overflow'

如果滚动条被放在元素框的一边上，则应将其插入边框内边界与内边距外边界之间。滚动条占用的任何空间都应该从包含滚动条的元素所形成的含块的尺寸中减去（从包含块的尺寸中减去滚动条）

示例：

考虑下面的示例，对其包含块（由<div>建立的）而言，块引用（<blockquote>）太大。（HTML）源码如下：


<div>
<blockquote>
<p>I didn't like the play, but then I saw
it under adverse conditions - the curtain was up.</p>
<cite>- Groucho Marx</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>将被格式化成未经裁剪的，就像这样：

Rendered overflow   [D]

另一方面，把<div>的'overflow'设置为'hidden'，会让<blockquote>被裁剪到包含（它）的<div>里：

Clipped overflow   [D]

'scroll'值将告诉UA支持一个可见的滚动机制来显示它，让用户可以访问被裁剪掉的内容

最后，考虑这种情况，当绝对定位的元素与溢出的父元素混在一起时

样式表： 


  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'属性

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

'clip'
Value:  <shape> | auto | inherit
Initial:  auto
Applies to:  绝对定位的元素
Inherited:  no
Percentages:  N/A
Media:  visual
Computed value:  'auto'的计算值同指定值，否则就是一个具有4个值的矩形，其中'auto'的计算值为'auto'，否则就是计算得到的长度

'clip'属性只适用于绝对定位的元素。值含义如下：

auto
该元素不裁剪
<shape>
CSS 2.1中，唯一合法的<shape>值为：rect(<top>, <right>, <bottom>, <left>)。其中<top>和<bottom>指定了从该盒的上边框边界的偏移，而<right>和<left>指定了从该盒的左边框边界的偏移。编写者应该用逗号分隔偏移值。用户代理必须支持逗号分隔，但可能也支持无逗号分隔（但也不是把值结合起来），因为本规范的一个先前版本在这方面不明确

<top>，<right>，<bottom>和<left>可以具有一个<length>值或者'auto'。允许负的长度。'auto'值表示裁剪区域给定的边界将和该元素生成的边框框边界相同（即，'auto'表示<top>和<left>为'0'，<bottom>为高度的应用值加上垂直内边距和边框宽度之和，<right>为宽度的应用值加上水平内边距和边框宽度之和。因此4个'auto'值产生的裁剪区域与该元素的边框框相同）

当坐标被四舍五入成像素坐标时，应该注意如果<left>和<right>值相同（或者<top>和<bottom>值相同）的话，不显示任何像素，反过来，如果这些值都是'auto'，所有处于该元素的边框框里的像素都会显示出来

一个元素的裁剪区域会裁剪掉该元素裁剪区域外的所有东西（例如，内容，子级，背景，边框，text decoration，outline和可见的滚动机制—如果有的话）。已经被裁剪掉的内容不会导致溢出

元素的祖先也可能被裁剪掉部分内容（例如，通过它们自己的'clip'属性和/或如果它们的'overflow'属性不为'visible'）。呈现的是累计交集（what is rendered is the cumulative intersection）

如果裁剪区域超出了UA文档窗口的边界。内容可能被原生操作环境裁剪到该窗口

示例：

示例：下列2条规则：

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

再假设P都是50×55 px的，将会分别创建用虚线分隔的矩形裁剪区域，如下图所示：

Two clipping regions   [D]

注意 CSS 2.1中，所有裁剪区域都是矩形的。我们预期将来会扩展到允许非矩形裁剪。将来的更新还可能重新介绍一种用来从各边偏移形状而不是从一个点偏移的语法

11.2 可见性：'visibility'属性

'visibility'
Value:  visible | hidden | collapse | inherit
Initial:  visible
Applies to:  所有元素
Inherited:  yes
Percentages:  N/A
Media:  visual
Computed value:  与指定值相同

'visibility'属性指定了一个元素生成的盒是否应该呈现出来。不可见的盒仍然会影响布局（把'display'属性设置为'none'可以完全禁止盒生成）。值含义如下：

visible
生成的盒是可见的
hidden
生成的盒是不可见的（完全透明，什么都不绘制），但仍然会影响布局。而且该元素具有'visibility: visible'的后代将是可见的
collapse
请查看表格的动态行列效果章节。如果用在非行，行组（row group），列，或者列组（column group）元素上，'collapse'与'hidden'含义相同

该属性可以配合脚本来创建动态效果

下例中，按下按钮调用一个编写者定义的脚本函数，会让相应的盒变得可见，并隐藏其它盒。因为这些盒具有相同的尺寸和位置，效果是一个替换掉其它的（该脚本代码是一种假想的脚本语言，它不一定对支持CSS（CSS-capable）的UA有效） 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<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.png">
   <P>Name: Al Capone</P>
   <P>Residence: Chicago</P>
</DIV>

<DIV id="container2">
   <IMG alt="Lucky Luciano" 
        width="100" height="100" 
        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>

上一章   下一章   内容   属性   索引