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;会隐藏内容，并且占据实际宽高尺寸。