opacity: 0、visibility: hidden、display: none 有啥区别

这三种方式的使用场景分别是：
● opacity: 0：隐藏元素，但是需要占据原来的空间；需要注意的是，opacity 属性不仅影响元素的可见性，还影响其交互行为（例如点击事件的响应）
● visibility: hidden：隐藏元素，但是需要占据原来的空间，并且保持元素布局不变；
● display: none：隐藏元素，并且不需要占据原来的空间，也不影响其他元素的布局。

opacity: 0、visibility: hidden、display: none 是 CSS 中用于隐藏元素的三种常用方式，它们之间的区别如下：

1. opacity: 0

opacity: 0：将元素的不透明度设置为 0，使元素变得完全透明，但是仍然会占用原来的空间。这意味着元素虽然不可见，但是其位置和大小仍然存在。另外，元素的子元素会继承父元素的不透明度。
使用场景：当需要隐藏元素，但是仍然需要占据原来的空间时，可以使用 opacity: 0。

1. visibility: hidden

visibility: hidden：将元素隐藏起来，使其不可见，但是仍然占据原来的空间。这意味着元素不可见，但是其位置和大小仍然存在。另外，元素的子元素会继承其可见性状态，即如果父元素被隐藏，那么子元素也会被隐藏。
使用场景：当需要隐藏元素，但是仍然需要占据原来的空间时，可以使用 visibility: hidden。与 opacity: 0 不同，visibility: hidden 不会改变元素的大小和位置，因此在需要保持元素布局不变的情况下，可以使用 visibility: hidden。

1. display: none

display 属性指定元素的显示方式，其取值可以为 block（块级元素）、inline（内联元素）等，还可以取值为 none，表示不显示元素。
使用场景：当需要隐藏元素，并且不需要占据原来的空间时，可以使用 display: none。与 opacity: 0 和 visibility: hidden 不同，display: none 会使元素不占据空间，也不会影响其他元素的布局。