【前端】display:none和visibility:hidden两者的区别
【前端】display:none和visibility:hidden两者的区别
前言
在CSS布局中，display和visibility属性是控制元素显示状态的两个重要工具。尽管它们在某些情况下可以互换使用，但它们之间存在一些关键的区别。本文将深入探讨这两个属性，并提供代码示例来帮助理解它们之间的差异。
一、display与元素的隐藏
display:none属性用于完全隐藏一个元素，并且不保留该元素在页面上所占的空间。当元素的display属性设置为none时，它不会在文档流中占据任何位置，就好像它从未存在过一样。 这里给出两个示例代码进行一个讲解
<div id="hiddenElement">这个元素将被隐藏</div>#hiddenElement {
display: none;
}在上面的例子中，#hiddenElement将完全从页面上消失，并且不会留下任何空间。
我们也可以用图像来说明。
<body>
<div>
<strong>给元素设置display:none样式</strong>
<p>A元素</p>
<p style='display:none;'>B元素</p>
<p>C元素</p>
</div>
</body>
二、visibility与元素的隐藏
visibility:hidden属性将元素设置为不可见，但元素仍然保留其在页面上所占的空间。这意味着，即使元素不可见，它仍然会影响页面的布局。
<div id="invisibleElement">这个元素仍然占据空间，但不可见</div>#invisibleElement {
visibility: hidden;
}在上述示例中，#invisibleElement将不可见，但它原本占据的空间仍然保留，这可能会影响其他元素的布局。
大家可以运行下面的代码简单实验一下。
<body>
<div>
<strong>给元素设置visibility:hidden样式</strong>
<p>A元素</p>
<p style='visibility:hidden;'>B元素</p>
<p>C元素</p>
</div>
</body>
三、两者区别
3.1 性能方面对比
display:none：由于元素完全从文档流中移除，可能对性能有积极影响，尤其是在处理大量隐藏元素时。
visibility:hidden：由于元素仍然占据空间，对性能的影响较小，但可能需要额外的布局计算。
另外，很多人认为visibility: hidden和display: none的区别仅仅在于display: none隐藏后的元素不占据任何空间，而visibility: hidden隐藏后的元素空间依旧保留 ，实际上没那么简单，visibility是一个非常有故事性的属性
1、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别
2、visibility: hidden不会影响计数器的计数，如图所示，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样
<body>
<div>
<strong>给元素设置visibility:hidden样式</strong>
<ol>
<li>元素1</li>
<li style="visibility:hidden;">元素2</li>
<li>元素3</li>
<li>元素4</li>
</ol>
</div>
<div>
<strong>给元素设置display:none样式</strong>
<ol>
<li>元素1</li>
<li style="display:none;">元素2</li>
<li>元素3</li>
<li>元素4</li>
</ol>
</div>
</body>
3.2 动画方面对比
display:none：不适用于动画或过渡效果，因为元素不存在于文档流中。
visibility:hidden：可以与opacity属性结合使用，创建平滑的显示和隐藏效果。
我们可以试下下面的代码示例，平滑隐藏元素。
<button id="toggleVisibility">Toggle Visibility</button>
<div id="smoothElement">平滑隐藏的元素</div>#smoothElement {
transition: visibility 0.5s, opacity 0.5s linear;
opacity: 1;
}
#smoothElement.hidden {
visibility: hidden;
opacity: 0;
}document.getElementById('toggleVisibility').addEventListener('click', function() {
var element = document.getElementById('smoothElement');
element.classList.toggle('hidden');
});我们使用JavaScript来切换#smoothElement的hidden类，从而实现平滑的显示和隐藏效果。
四、总结
display:none和visibility:hidden各有其用途和特点。选择哪一个取决于你的具体需求：如果你需要完全隐藏元素并释放其空间，display:none是更好的选择；如果你只是想让元素不可见但保留其空间，visibility:hidden将是一个合适的选项。理解这些差异将帮助你更有效地使用CSS来控制元素的显示和隐藏。