1、visibility: hidden 隐藏元素但占位，display: none 彻底移除且不占空间，opacity: 0 使元素透明但仍可交互，通过 javaScript 切换css 类或使用 hidden 属性也可控制显示状态。
如果您希望控制网页中某些 html 元素的显示与隐藏，可以通过多种方式实现。这些方法不仅影响元素的可见性，还可能影响其在页面布局中的占位。以下是几种常用的控制元素显示的方法，重点介绍 visibility 属性及其相关技术。
一、使用 visibility 属性控制元素可见性
visibility 属性用于定义元素是否可见，但不会改变文档的布局结构。即使元素不可见，它仍然占据原有的空间。
1、将元素设置为不可见：visibility: hidden; 可使元素隐藏，但保留其在页面中的位置。
2、恢复元素可见性：visibility: visible; 可重新显示被隐藏的元素。
立即学习 “ 前端免费学习笔记（深入）”；
3、通过 css 样式 或javascript动态修改该属性值，实现控制效果。
二、使用 display 属性完全移除元素
display 属性不仅能控制元素的显示状态，还能决定元素的布局行为。设置为 none 时，元素将从渲染树中移除，不占用任何空间。
1、隐藏元素并释放空间：display: none; 会使元素完全不可见且不参与布局。
2、重新显示元素：将 display 值设回其原始类型，如 block、inline 或 flex 等。
3、适用于需要彻底隐藏并调整布局的场景。
三、利用 opacity 属性实现透明度控制
opacity 属性通过调整元素的透明度来控制其视觉可见性，值为 0 时表示完全透明，但仍可触发 事件。
1、使元素不可见：opacity: 0; 元素视觉上消失，但依然占据空间并可响应 鼠标事件。
2、恢复可见性：设置 opacity 为 1 或其他大于 0 的值。
3、常用于淡入淡出动画效果中。
四、通过 CSS 类切换控制显示状态
通过 JavaScript 动态添加或移除 CSS 类，可以更灵活地管理元素的显示行为，提升代码可维护性。
1、定义两个 CSS 类，例如。show 和。hide，分别对应不同的 display 或 visibility 值。
2、使用 JavaScript 的 classlist.add()或 classList.remove()方法切换类名。
3、示例代码：element.classList.remove(‘hide’); element.classList.add(‘show’);
五、使用 hidden 全局属性进行语义化隐藏
html5引入了 hidden 布尔属性，表示元素当前不应被显示，浏览器 会默认应用类似 display: none 的样式。
1、在 HTML 标签中直接添加 hidden 属性即可隐藏元素。
2、通过 JavaScript 操作该属性：element.hidden = false; 可重新显示元素。
3、具有良好的语义性，适合临时性隐藏内容。
