《层次堆叠与隐藏》PPT课件.ppt

《《层次堆叠与隐藏》PPT课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第12章层次堆叠与隐藏从我们的肉眼看，所有的网页都是平面的、二维的，即只有水平的X轴方向和垂直的Y轴方向，如图所示。一般网页只在一个平面上伸展12.1使网页变成三维立体的z-index前几年，流行过一阵三维立体画，当我们仔细注视图画直至达到“对眼”(英文叫做Cross-eyed)的程度，画面就会分层，呈现出不同的图案，很有立体效果。CSS对于网页的三维支持，在效果上很类似立体画，不过，它将不同的标签都直接显现出来，并不用我们费眼力去凝神关注地观察。在这种意义上，它更类似一堆扑克牌部分摊开的效果，如图所示。扑克牌的堆叠效果12.1

2、.1z-index属性简介在CSS中，通过设置标签的z-index属性，可以控制标签在z轴方向上的次序。还是举图扑克牌的例子，如果打算要黑桃10这个标签显示在最上层，那么只要将它的z-index属性比其他牌都大就可以了，类比一下，改变z-index相当于我们理牌的过程。【z-index设置语法】设置z-index很简单，在样式规则中增加如下的字符即可：z-index:数值数值可以是如下两种：auto：默认值，表示该标签与父标签“平起平坐”，处于同一水平面上。number：无单位的整数值，也可为负数，不过Firefox并不支持负数

3、，为了标准化起见，建议设置为正整数。12.1.2堆叠上下文（stackcontext）所谓堆叠上下文，英文名称为stackcontext，其中，stack是堆栈、堆叠的意思。我们经常看到工人往货车上装货物，总是越装越高，后装的货物摞在上面。在网页上堆叠的标签也是如此，所谓z-index属性就相当于给标签贴上号码，号码大的后装。Context中文意思有背景、上下文的意思，在计算机世界中一般都翻译为上下文。实际上我们很早就接触过上下文这个词，比如在中学的时候，语文老师经常让我们总结段落的中心思想。某段文字从字面看是某个意思，但如果夹

4、在别的段落中间，意思很可能变化，这就是上下文的作用。12.1.3代码顺序和显示顺序这两个因素相对比较简单。【代码顺序】所谓代码顺序，就是指标签在HTML源代码中出现的顺序。由于浏览器是通过读取HTML代码来显示网页的，因此，假如代码中有两个Div标签，一前一后，如果它们的层叠上下文和z-index都一样，位置也发生了重叠，则最终显示结果肯定是后者要覆盖前者。这可以通过绘画来类比，画家后来在画布上涂抹的色彩肯定要覆盖之前的色彩。实际上，代码顺序描述的是基本文档流中的标签前后顺序问题。下面看一下特殊文档流中的情形。【显示顺序】在第1

5、1章中我们提到凡是利用了position属性的标签或多或少都和特殊文档流有关，浏览器在显示的时候将它们脱离普通文档流，专门进行显示，有些重要客户的意思。这些标签在代码顺序上很可能非常靠前，但无论如何，最终都会显示在尽可能的顶层。12.1.4层叠的应用举例本小节综合前文所述的几个规律，通过一个实例来复习浏览器在显示标签时的规律。包含了多个半透明的Div标签，通过对它们设置不同的position属性（absolute和relative）来观察默认状态下（即不使用z-index属性的状态）不同Div的堆叠行为。定位标签在网页上的默认堆

6、叠方式12.2控制标签的显示与隐藏控制标签的显示方式是利用Display属性。前面的章节中我们也零星遇到过它，比如，将一个块元素转化为行内元素的方法：display:inline。本小节将介绍display属性其他的选择。同时，CSS还有一个专门用来控制标签隐藏的属性，我们将对它们进行比较。12.2.1Display属性我们可能对类似的英文Displayer更熟悉一些，它是显示器的意思。Display是用来控制标签的显示方式的，它可以设置的参数值部分如下：Block：像块元素一样显示。none：标签不显示。inline：像行内元

7、素一样显示。inline-block：像行内元素一样显示，但其内容像块类型元素一样显示。list-item：像块元素一样显示，并添加样式列表标记。table-header-group：类似的作用，令标签显示在任何表格行和行组合之前，在头部标题之后。table-footer-group：类似的作用，令标签显示在任何表格行和行组合之后，在底部标题前。12.2.2Visibility属性利用Display:none可以将标签设置为不可见，其实，CSS还有一个专门的属性用来控制标签的显示与否，这就是V

8、isibility属性。它可以设置的值有三个，分别如下：Visible：标签可见。Hidden：标签不可见。Collapse：标签应用于表格标签中的某一列或者某一行时，当前行或者列将消失。不过IE不支持此设置。12.3小结本章利用主要的篇幅介绍了z-index属