css三种隐藏方法的不同

发表于前端技术学习版块 css,教程

CSS中有三种不同的隐藏方法：display: none、visibility: hidden、opacity: 0。它们的区别如下：<style> // display:

CSS中有三种不同的隐藏方法：display: none、visibility: hidden、opacity: 0。它们的区别如下：

<style>
// display: none
.hide1 {
  display: none;
}

// visibility: hidden
.hide2 {
  visibility: hidden;
}

// opacity: 0
.hide3 {
  opacity: 0;
}
</style>

<p>首先，display: none会完全从文档流中移除元素，它不占据任何空间，同时它所包含的内容也不会渲染。相比较而言，visibility: hidden会隐藏元素但不会改变页面的布局，它仍然占据原来的空间，且它所包含的内容也会渲染（比如可以复制隐藏的元素的文字。）。最后，opacity: 0会使元素透明，但是它仍然占据空间，且它所包含的内容也会渲染。相较而言，opacity: 0虽然让元素透明， 但是鼠标事件仍然可以作用于它，因此有时可能需要将元素的pointer-events属性设置为none来禁用它的交互。</p>

文章说明:

本文原创发布于探乎站长论坛，未经许可，禁止转载。

题图来自Unsplash，基于CC0协议。

该文观点仅代表作者本人，探乎站长论坛平台仅提供信息存储空间服务。