【CSS】隐藏元素

1. 完全隐藏

完全隐藏意味着元素在页面中既不可见，也不可访问，不占据页面布局空间，从渲染树中消失。

使用 display 属性：

.hidden {
    display: none;
}

使用 visibility 属性：

.hidden {
    visibility: hidden;
}

这两种方法都可以完全隐藏元素，它们的区别在于 display: none; 会使元素从文档流中移除，不占据任何空间，而 visibility: hidden; 则会使元素保留在文档流中，占据布局空间，只是不可见。

2. 视觉上隐藏

视觉上隐藏意味着元素不可见，但仍然可以访问，并且占据页面布局空间。

使用 opacity 属性：

.hidden {
    opacity: 0;
}

使用 visibility 属性和透明度：

.hidden {
    visibility: hidden;
    opacity: 0;
}

绝对定位

position: absolute;
left: -999px;
top: -999px;

设置 margin

margin-left: -9999px;

设置宽高为 0

width: 0px;
height: 0px;
overflow: hidden;

裁剪元素

clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);

3. 语义上隐藏

语义上隐藏意味着元素在视觉上可见，但在屏幕阅读器或搜索引擎中不可访问，通常用于提供辅助信息或隐藏交互元素，正常占据空间。

使用 aria-hidden 属性：

<div aria-hidden="true">这个元素在屏幕阅读器中不可访问</div>

使用 tabindex 属性：

<button tabindex="-1">这个按钮在键盘 tab 键切换时不可访问</button>

使用 font-size 设置为 0：

.hidden {
    font-size: 0;
}