第12章 层次堆叠及隐藏.ppt

第12章 层次堆叠与隐藏 从我们的肉眼看，所有的网页都是平面的、二维的，即只有水平的X轴方向和垂直的Y轴方向，如图所示。 12.1 使网页变成三维立体的z-index 前几年，流行过一阵三维立体画，当我们仔细注视图画直至达到“对眼”(英文叫做Cross-eyed)的程度，画面就会分层，呈现出不同的图案，很有立体效果。 CSS对于网页的三维支持，在效果上很类似立体画，不过，它将不同的标签都直接显现出来，并不用我们费眼力去凝神关注地观察。在这种意义上，它更类似一堆扑克牌部分摊开的效果，如图所示。 12.1.1 z-index属性简介 在CSS中，通过设置标签的z-index属性，可以控制标签在z轴方向上的次序。还是举图扑克牌的例子，如果打算要黑桃10这个标签显示在最上层，那么只要将它的z-index属性比其他牌都大就可以了，类比一下，改变z-index相当于我们理牌的过程。 【z-index设置语法】 设置z-index很简单，在样式规则中增加如下的字符即可： z-index:数值 数值可以是如下两种： auto：默认值，表示该标签与父标签“平起平坐”，处于同一水平面上。 number：无单位的整数值，也可为负数，不过Firefox并不支持负数，为了标准化起见，建议设置为正整数。 12.1.2 堆叠上下文（stack context） 所谓堆叠上下文，英文名称为stack context，其中，stack是堆栈、堆叠的意思。我们经常看到工人往货车上装货物，总是越装越高，后装的货物摞在上面。在网页上堆叠的标签也是如此，所谓z-index属性就相当于给标签贴上号码，号码大的后装。 Context中文意思有背景、上下文的意思，在计算机世界中一般都翻译为上下文。实际上我们很早就接触过上下文这个词，比如在中学的时候，语文老师经常让我们总结段落的中心思想。某段文字从字面看是某个意思，但如果夹在别的段落中间，意思很可能变化，这就是上下文的作用。 12.1.3 代码顺序和显示顺序 这两个因素相对比较简单。 【代码顺序】 所谓代码顺序，就是指标签在HTML源代码中出现的顺序。由于浏览器是通过读取HTML代码来显示网页的，因此，假如代码中有两个Div标签，一前一后，如果它们的层叠上下文和z-index都一样，位置也发生了重叠，则最终显示结果肯定是后者要覆盖前者。这可以通过绘画来类比，画家后来在画布上涂抹的色彩肯定要覆盖之前的色彩。 实际上，代码顺序描述的是基本文档流中的标签前后顺序问题。下面看一下特殊文档流中的情形。 【显示顺序】 在第11章中我们提到凡是利用了position属性的标签或多或少都和特殊文档流有关，浏览器在显示的时候将它们脱离普通文档流，专门进行显示，有些重要客户的意思。这些标签在代码顺序上很可能非常靠前，但无论如何，最终都会显示在尽可能的顶层。 12.1.4 层叠的应用举例 本小节综合前文所述的几个规律，通过一个实例来复习浏览器在显示标签时的规律。 包含了多个半透明的Div标签，通过对它们设置不同的position属性（absolute和relative）来观察默认状态下（即不使用z-index属性的状态）不同Div的堆叠行为。 12.2 控制标签的显示与隐藏 控制标签的显示方式是利用Display属性。前面的章节中我们也零星遇到过它，比如，将一个块元素转化为行内元素的方法：display:inline。本小节将介绍display属性其他的选择。同时，CSS还有一个专门用来控制标签隐藏的属性，我们将对它们进行比较。 12.2.1 Display属性 我们可能对类似的英文Displayer更熟悉一些，它是显示器的意思。Display是用来控制标签的显示方式的，它可以设置的参数值部分如下： Block：像块元素一样显示。 none：标签不显示。 inline：像行内元素一样显示。 inline-block： 像行内元素一样显示，但其内容像块类型元素一样显示。 list-item：像块元素一样显示，并添加样式列表标记。 table-header-group：类似theader的作用，令标签显示在任何表格行和行组合之前，在头部标题之后。 table-footer-group：类似tfooter的作用，令标签显示在任何表格行和行组合之后，在底部标题前。 12.2.2 Visibility属性 利用Display:none可以将标签设置为不可见，其实，CSS还有一个专门的属性用来控制标签的显示与否，这就是Visibility属性。它可以设置的值有三个，分别如下： Visible：标签可见。 Hidden：标签不可见。 Collapse：标签应用于表格标签中的某一列或者某一行时，当前行或者列将消失。不过IE不支持