隐藏元素的多种方式

在前端开发中，隐藏页面元素是一个常见的需求。无论是为了实现某种视觉效果，还是为了满足无障碍访问的要求，隐藏元素的方式多种多样。本文将为你全面解析隐藏元素的三大类别：完全隐藏、视觉上隐藏和语义上隐藏，以及每种方式的具体实现方法。

一、完全隐藏：让元素从渲染树中消失

完全隐藏的元素不会在页面上占据任何空间，就好像它们从未存在过一样。这种方式适用于那些完全不需要在页面上显示的元素。

（一）display: none

这是最常用的隐藏元素方法。通过将元素的 display 属性设置为 none，元素将从渲染树中移除，不会占据任何空间。

.hidden {
   
  display: none;
}

（二）hidden 属性

HTML5 提供了一个更简洁的隐藏方式：hidden 属性。在元素上添加 hidden 属性，效果与 display: none 相同。