27.6.2　设置对象是否显示

在布局时，有时需要有的对象不显示，但需要占用对象的空间，当达到一定条件时，该对象才显示出来，与之相关的还有其他需求：设置对象是否显示或刚开始不显示，等条件达到后才显示出来。设置对象是否显示用的语法用visibility表示，其后接参数来表示对象是否显示。

属性visibility用来设置是否显示对象，其后接的值效果与display有部分相似，其完整语法形式如下。

visibility：inherit|visible|hidden

❑参数inherit：默认值。继承父对象的可见性

❑参数visible：表示对象可视。

❑参数hidden：表示隐藏对象。

本属性在应用中是比较常用的，如设置层对象显示，而本参数的隐藏与display的隐藏效果稍有区别。一个表示物理上隐藏，一个表示完全的隐藏。从页面的效果中可以看到，visibility表示的对象在网页中是存在一个空间的，不管它是否显示。而display表示的对象是在网页中显示就有空间存在，而隐藏时，网页中的空间也随之消失，这是两者的关键区别。

属性visibility与display的参数值表示也不同，visibility的值用visible来表示对象可见，而用hidden来表示对象不可见，即隐藏，但空间还存在于对象上，代码27.7表示visibility用法。

代码27.7　源代码\第27章\visibility用法.html

—————————————文件名：visibility用法.html—————————————

01 ＜html＞

02 ＜head＞

03 ＜title＞visibility用法＜/title＞

04 ＜style type="text/css"＞

05 #vis1

06 {

07 /设置visibility的默认值/

08 visibility：inherit；

09 border：1px solid red；

10 }

11 #vis2

12 {

13 /设置对象可见/

14 visibility：visible；

15 border：1px solid red；

16 }

17 #vis3

18 {

19 /设置对象不可见/

20 visibility：hidden；

21 border：1px solid red；

22 }

23 ＜/style＞

24 ＜/head＞

25 ＜body＞

26 ＜div id="vis1"＞

27 可以看到这张图片吗？visibility设置为inherit

28 ＜img src="html.jpg"＞

29 ＜/div＞

30 ＜div id="vis2"＞

31 可以看到这张图片吗？visibility设置为visible

32 ＜img src="html.jpg"＞

33 ＜/div＞

34 ＜div id="vis3"＞

35 可以看到这张图片吗？visibility设置为hidden

36 ＜img src="html.jpg"＞

37 ＜/div＞

38 ＜/body＞

39 ＜/html＞

【代码解析】在代码27.7中，对visibility设置不同的参数，代码第6～10行为第1个层设置为inherit，而在代码第11～16行的第2层中，设置visibility的值为visible，表示显示对象，相反，在代码第17～22行的第3层中，设置对象的visibility为hidden，在网页上占用热物理空间，但不显示出来，从右边的滚动条可以看出，空间上还是存在这个层对象的，效果如图27.8所示。

图　27.8　visibility用法

注意　理解visibility与display的区别，除了表现出来的效果不同外，两属性的参数值也不一样。