display:none和visibility:hidden的区别-2345资源网 - 精品建站资源与技术分享平台

空间占据上的区别

如果用文字来描述，简单一句话就是display:none的元素是彻底消失，也就是说该元素的宽度、高度等各种属性值都将“丢失”，不在文档流中占位，浏览器也不会解析该元素；而visibility:hidden只是视觉上消失了，可以理解为透明度为0（opacity:0）的效果，它仍具有高度、宽度等属性值，因此在文档流中占位，浏览器会解析该元素。

因此，我们可以知道display:none的元素隐藏后不占据额外空间，状态切换会产生回流和重绘，而visibility:hidden的元素虽然隐藏了，但它们仍然占据着空间，它的状态切换只会引起页面重绘。

<style>  
        div {  
            width: 200px;  
            height: 200px;  
            background: #ccc;  
            margin-top: 10px;  
        }  
        .div1 {  
            display: none;  
        }  
        .div2 {  
            visibility: hidden;  
        }  
    </style>  
    <body>  
        <div class="div1">  
            <p>display:none</p>  
        </div>  
        <div class="div2">  
            <p>visibility:visible</p>  
        </div>  
    </body>

div1：图片[1]-display:none和visibility:hidden的区别-2345资源网 - 精品建站资源与技术分享平台

div2：图片[2]-display:none和visibility:hidden的区别-2345资源网 - 精品建站资源与技术分享平台