使用 visibility: hidden 可隐藏元素并保留其布局空间。1. 设置 .hide-element { visibility: hidden; } 类，通过 classList.toggle('hide-element') 控制显隐；2. 使用 [data-visible="false"] { visibility: hidden; } 属性选择器，配合 setAttribute 动态控制 data-visible 属性实现显示状态切换。该方法不破坏文档流，适用于需保留占位的隐藏场景。
要隐藏元素但保留其在页面中的布局空间，可以使用 visibility: hidden 或通过 CSS 属性选择器或 class 来控制显示状态。
使用 visibility: hidden 隐藏元素（保留布局）
这个方法会让元素不可见，但仍然占据文档流中的空间。
.visibility-hidden {visibility: hidden;
}
与 display: none 不同，display: none 会完全从布局中移除元素，而 visibility: hidden 只是“隐形”，位置还在。
通过 class 控制隐藏状态
定义一个用于隐藏的 class，然后动态添加或移除它来控制元素显隐。
立即学习“前端免费学习笔记（深入）”；
.hide-element {visibility: hidden;
}
HTML 中：
JavaScript 可以切换 class：
element.classList.toggle('hide-element');
使用属性选择器控制隐藏
你可以自定义 HTML 属性，比如 data-visible，然后用属性选择器来控制样式。
[data-visible="false"] {visibility: hidden;
}
HTML 示例：
这个也会被隐藏但保留空间
用 JavaScript 修改属性即可控制显示：
element.setAttribute('data-visible', 'false');// 或设为 true 显示
element.setAttribute('data-visible', 'true');
这种方式适合需要通过语义化属性控制样式的场景，结构清晰且易于维护。
基本上就这些。用 visibility 配合 class 或属性选择器，既能隐藏元素，又不会影响原有布局。不复杂但容易忽略细节。
