display:none和visibility:hidden和透明度的区别

最新推荐文章于 2024-08-10 09:59:41 发布

Cheesepiupiupiu

最新推荐文章于 2024-08-10 09:59:41 发布

阅读量617

点赞数 1

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/qq_41541504/article/details/106387985

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

 **当想实现一个区域或者内容的消失（隐藏）**，我们有多种代码可以实现。但是根据要求和用户体验，应该选择最合适的方法实现。
 代码中最常用的代码包括：display:none;   visibility:hidden   opacity:0;  其中还有一种被程序员们忽略的rgba();通过改变颜色的透明度，也可以改变内容的字体颜色透明度。一般最难区分的是前三者。

1、display：none;
从字面意思上理解为没有展示的内容。
在这里插入图片描述
实现代码后，元素内容会直接消失；我们可以在检查器中查看。

在这里插入图片描述

h1已经不占据实际尺寸，并且我们在浏览器器无法点击到。因此，能总结出，display:none;会让元素不占据实际尺寸并且无法点击。

2、visibility:hidden;
我们从英文上的直译上会发现他们的意思都是一样的，我们用代码来验证两者是否有区别。
在这里插入图片描述

在检查器中，我们能观察到content区域有实际的宽高尺寸，当然在浏览器中肯定是不显示的，我们还会发现之前的内容区域也无法点击。因此，它会隐藏内容，内容依然会占据实际的宽高尺寸，但是无法进行点击。
3、opacity:0;
opacity是不透明的意思，在css中我们通常用来作为透明度，取值是0~1；当取值为1时，内容完全显示；取值为0时，内容消失。我们先通过代码进行实现。
在这里插入图片描述
我们会发现他和visibility：hidden;在检查器中都会占用实际尺寸。我们将鼠标放在内容区域上，光标形状会发生改变。说明内容依然展示在页面上。因此，opacity:0;会隐藏内容，并且占据实际宽高尺寸。