css 样式隐形

1. visibility: hidden;

• 描述: 元素会变得不可见，但仍然会占用文档的空间，且仍然能够响应事件（如 hover）。
• 补充:
  • 元素的子元素如果未被单独设置 visibility: visible;，也会继承 hidden 的状态。
  • 适用于需要保留布局，但隐藏内容的场景。

2. opacity: 0;

• 描述: 元素会完全透明，但仍然会占用空间，并且可以响应用户操作（如点击、hover）。
• 补充:
  • 常用于过渡动画效果。
  • 如果需要同时屏蔽点击事件，可以结合 pointer-events: none; 使用。

3. position: absolute; 和 left: -9999px;

• 描述: 元素通过设置很大的负偏移值移出可见区域，视觉上不可见，但仍会保留在 DOM 中。
• 补充:
  • 元素不会影响其他元素的布局。
  • 常用于屏幕阅读器的隐藏内容（如无障碍辅助）。

4. display: none;

• 描述: 元素从文档流中完全移除，不占用任何空间，且不会响应任何事件。
• 补充:
  • 元素不会被渲染，DOM 中仍然存在，脚本依然可以访问和操作。
  • 用于完全隐藏元素的场景。

5. transform: scale(0);

• 描述: 将元素缩放为无限小，视觉上不可见，但元素仍占据原有的空间。
• 补充:
  • 常用于动画效果。
  • 元素仍然可以响应事件（如点击、hover）。

6. height: 0;

• 描述: 将元素高度设为 0，同时可以隐藏边框、内边距等视觉内容，但元素仍占用水平空间。
• 补充:
  • 需要配合 overflow: hidden; 使用，以确保内容不可见。
  • 常用于手风琴样式的折叠面板。

7. filter: blur(0);

• 描述: 将元素模糊度设为 0，并不会使元素消失，反而会清晰显示该元素。
• 纠正:
  • 如果要让元素“消失”，可以使用 filter: blur(10px); 等高值让其模糊到看不清的状态。
  • 仅模糊不会完全隐藏内容。

8. <div hidden="hidden">

• 描述: HTML5 属性，效果类似于 display: none;。
• 补充:
  • hidden 属性用于表示元素“应该”被隐藏，是语义化的方式。
  • 通过 JavaScript 可以使用 element.hidden = true; 来动态控制该属性。
  • 注意：部分无障碍工具可能会处理 hidden 元素。

总结补充：

• visibility: hidden 和 display: none 的区别在于是否保留占用空间。
• opacity: 0 和 transform: scale(0) 不会影响布局，但元素仍可交互。
• position: absolute 和负偏移适合隐藏不影响布局的元素。
• height: 0 和 overflow: hidden 常用于动画效果。
• hidden 属性是 HTML 的语义化方式，用于标记隐藏状态。