对于html中不同的显示与隐藏方式的说明

       一般在 html 语言中设置显示与隐藏的常见的方法有两种，它们分别是 display 和visibility，下面就简略介绍一下两种隐藏方式的区别

display：

             可选值：none（隐藏）block（显示）

visibility:

             可选值：hidden（元素不可见）visible（元素可见）

下面分别对两种方法进行测试：

首先是对 display 的两个可选值进行测试，代码如下：

    
    



    
这是 div 的内容
        
这是 p 标签的内容
        
这是 h2 的内容
    

这是 display 可选值为 none 时运行测试用例是的结果

这是 display 可选值为 block 时运行测试用例的结果

   接着对 visibility 的两个可选值进行测试，代码如下：

    
    


    
这是 div 的内容
        
这是 p 标签的内容
        
这是 h2 的内容
    

这是 visibility 可选值为 hidde 时测试用例运行的结果

这是 visibility 可选值为 visible 时测试用例运行的结果

 由此可见 display 和 visibility 的区别是：

display 设置隐藏时，不占用原来的位置，显示出来后才会占用原来的位置

 visibility 设置元素不可见时，依旧占有原来的位置。