Display和Visibility

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

1、隐藏效果练习

visibility

 
 




这是一个可见标题
这是一个隐藏标题
注意, 实例中的隐藏标题仍然占用空间。

display

 
 



	
这是一个可见标题
这是一个隐藏标题
注意, 实例中的隐藏标题不占用空间。
	

2、如何改变一个元素显示

CSS中块级、内联元素的应用：

利用CSS我们可以摆脱HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。

主要用的CSS样式有以下三个：

• display:block -- 显示为块级元素
• display:inline -- 显示为内联元素
• display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性

例如我们常将所有

元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。

下边我们用两个例子来演示如何改变元素显示

2.1 列表项改内联元素

 
 




链接列表水平显示：


HTML
CSS
JavaScript
XML

2.2 span元素改块元素

 
 




Nirvana
Record: MTV Unplugged in New York
Year: 1993
Radiohead
Record: OK Computer
Year: 1997

3、如何使用一个表格的collapse属性

visibility : callapse;

代码练习

 
 





  

    
Firstname
    
Lastname
  
  

    
Peter
    
Griffin
  
  

    
Lois
    
Griffin
  


注意: IE8 及其更早版本需要通过指定 !DOCTYPE 才可以支持 visibility:collapse。

生成页面效果

知识点回顾

表格的定义和用法

HTML 表单中有两种类型的单元格：

• 表头单元格 - 包含表头信息（由 th 元素创建）

• 标准单元格 - 包含数据（由 td 元素创建）

th 元素内部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左对齐的普通文本。