可见性：隐藏和显示：无之间有什么区别？

这两个属性在 CSS 中都非常有用。可见性：“隐藏”；属性用于指定元素在 Web 文档中是否可见，但隐藏元素在 Web 文档中占用空间。可见性是 CSS 中的一个属性，用于指定元素和显示的可见性行为：“none”属性用于指定元素在网站上是否存在。

句法：

• 可见性属性：

  visibility: visible| hidden | collapse | initial | inherit;

• 显示属性：

  display: none |  inline | block | inline-block;

所以， display的区别：“none”；和可见性：“隐藏”； ，从名称本身我们可以看出区别在于display: “none”; , 完全摆脱了标签，因为它从未存在于 HTML 页面中，而可见性：“隐藏”； , 只是使标签不可见它仍然会在 HTML 页面上占据空间它只是不可见。

例子：

  

    

  

    
        

            GeeksforGeeks
        
          
        

            display:"none"; and
            visibility: "hidden";
        
          
        

            
                display:
                
                    display:none
                 "none";
            
        
        

      
        

            
                visibility:
                
                    visibility:hidden
                 "hidden";
            
        
      
        

            You can see that the display: "none";
            don't have any blank space and
            visibility: "hidden": has the
            blank space.
        
    

  

输出：

在可见性范围内，标签仍然存在，因为您可以看到它们之间的空间，而随着显示摆脱了标签。

用于显示和可见性的 Javascript 语法：

• 显示=“无”；

  document.getElementById("Id").style.display = "none";

• 可见性=“隐藏”；

  document.getElementById("Id").style.visibility = "hidden";

例子：

  

    
        .container {
            width: 800px;
            height: 200px;
            border: 2px solid black;
        }
          
        .right {
            float: right;
            margin: 10px;
        }
          
        .left {
            float: left;
            margin: 10px;
        }
          
        #geek {
            width: 200px;
            height: 55px;
            background-color: yellow;
        }
          
        #geek1 {
            width: 200px;
            height: 55px;
            background-color: purple;
        }
    

  

    
        
            GeeksforGeeks
        
          
        
            Effect of display:"none" 
            and visibility="hidden"
        
          
        
          
         
            
                
                    On clicking the below button
                    this div tag still exists but
                    invisible.
                
                  
                
                    visibility="hidden"
                
                  
                
                    This line will be still and
                    won't go up as the above
                    div tag still exists but
                    invisible.
                
            
  
            
                
                    On clicking the below button
                    this div tag won't exist.
                
                  
                
                    display="none"
                
                  
                
                    This line will go up as
                    the above div tag none.
                
            
        
    
      
    
        function display() {
            document.getElementById(
                "geek").style.display = "none";
        }
  
        function visibility() {
            document.getElementById(
                "geek1").style.visibility
                = "hidden";
        }
    

  

输出：

在上面的显示按钮被点击时，整个页面向上移动，占据了被删除的 div 标签的空间，而当可见性按钮被点击时，它不会因为 div 仍然以不可见的形式存在。