您的位置:首页 >专题集锦 >

display:none是什么意思?display:none和visibility:hidden和透明度的区别是什么?

2023-01-19 08:36:24    来源:酷狗科技网

“display:none”的意思是设置元素不可见并且连盒模型也不生成,一般用于不占空间的隐藏元素。display属性规定元素应该生成的框的类型,当其值为“none”时可以规定元素不生成框,隐藏该元素,可以理解成在页面中把该元素删除掉一样。

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是什么意思 display:none和visibility:hidden和透明度的区别是什么 display是什么意思啊 "display:none;什么意思?

相关阅读

精彩推送