隐藏元素的三种方式

1. display: none;：最常见的隐藏元素的方式。在页面上不可见，也不占据空间，即元素的布局空间会被移除。但是该元素仍然存在于 DOM 中，可以通过 JavaScript 或其他方式访问。

   .hidden-element {
     display: none;
   }

2. visibility: hidden;：该属性也会隐藏元素，但不会影响元素的布局，即元素的空间仍然会保留。元素的内容仍然存在于 DOM 中，但是用户无法看到它。可以通过 JavaScript 改变其可见性。

   .hidden-element {
     visibility: hidden;
   }

3. opacity: 0;：设置元素的透明度为 0，元素仍然占据布局空间，但是不可见。与前两种方式不同，透明度的值为 0 时，元素仍然能够响应用户的交互事件，也可以通过 JavaScript 控制其样式。

   .hidden-element {
     opacity: 0;
   }