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

 **当想实现一个区域或者内容的消失（隐藏）**，我们有多种代码可以实现。但是根据要求和用户体验，应该选择最合适的方法实现。代码中最常用的代码包括：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;会隐藏内容，并且占据实际宽高尺寸。

通过代码对以上进行验证：
display:none; 不会占据实际尺寸并且无法点击隐藏内容；
visibility:hidden; 会占据实际尺寸但无法点击隐藏内容；
opacity:0; 会占据实际尺寸并且能够点击到隐藏的内容。

我只是通过简单代码进行验证，你们也可以通过加入其他标签来验证会更好理解。。。。。。。

display:none和visibility:hidden和透明度的区别相关推荐

display: none;、visibility: hidden、opacity=0区别总结
display: none; 1.浏览器不会生成属性为display: none;的元素. 2.display: none;不占据空间(毕竟都不熏染啦),所以动态改变此属性时会引起重排. 3.di ...
display:none和visibility:hidden两者的区别
使用css让元素不可见的方法有很多种,裁剪.定位到屏幕外边.透明度变换等都是可以的.但是最常用两种方式就是设置元素样式为display: none或者visibility: hidden.很多公司的面 ...
display:none和visibility:hidden的区别
在使用CSS隐藏一些元素时,我们经常用到 display:none 和 visibility:hidden.两者差别如下: 1. 是否占据空间 display:none,该元素不占据任何空间,在文档渲 ...
CSS隐藏属性display:none；visibility:hidden；overflow:hidden
前端CSS元素隐藏的知识(display:none:visibility:hidden:overflow:hidden:opacity: 0) 欢迎来到CSS隐藏属性界面你好! 可以仔细阅读这篇文章 ...
[css] 说说display:none和visibility:hidden的区别
[css] 说说display:none和visibility:hidden的区别 display:none dom对象不渲染. visibility:hidden 隐藏但是dom对象渲染. 个人简介 ...
display:none和visibility:hidden的qubie
隐藏元素 - display:none或visibility:hidden 隐藏一个元素可以通过把display属性设置为"none",或把visibility属性设置为" ...
_blank 和 _self的区别以及display:none和visibility:hidden的区别
_blank 和 _self的区别 target=_blank会在当前窗口之外再打开一个新窗口来显示新的页面 target=_self在当前窗口打开新页面 display:none和visibili ...
css = display: none, visibility: hidden, opacity: 0 的区别
一. 页面结构 display: "none" 的元素其实并不会渲染,不会出现在页面中,不会占据位置,切换"显隐"时会触发渲染,所以会影响性能. visibil ...
display:none;与visibility:hidden;的区别
display:none;不会占用任何空间 visibility:hidden;会占用隐藏前的空间大小转载于:https://www.cnblogs.com/yaser/p/4414825.html

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

display:none和visibility:hidden和透明度的区别相关推荐

最新文章

热门文章