通过CSS的display属性控制元素显隐，设置none可彻底隐藏元素且不占空间，设为block可重新显示块级元素，结合JavaScript能动态切换状态，实现交互式显示效果。
要控制网页元素的隐藏与显示，最常用的方法是通过CSS的 display 属性来设置 none 或 block。这种方式能完全从布局中移除元素或将其恢复显示。
1. 使用 display: none 隐藏元素
将元素的 display 设置为 none，元素不会在页面上占据任何空间，相当于彻底“消失”。
示例：div {
display: none;
}
这样，所有 div 元素将不可见，也不影响页面其他元素的布局。
2. 使用 display: block 显示元素
原来被隐藏的元素，可以通过设置 display: block 重新显示出来。block 是块级元素的常见显示方式，它会独占一行并按块布局。
立即学习“前端免费学习笔记（深入）”；
示例：.show {
display: block;
}
给需要显示的元素添加 show 类，即可让它重新出现在页面中。
3. 结合 JavaScript 动态切换
实际开发中，通常结合 JavaScript 来动态控制元素的显示状态。
示例代码：<div id="content">这是一段内容</div>
<button onclick="toggle()">切换显示</button>
function toggle() {
const el = document.getElementById('content');
if (el.style.display === 'none') {
el.style.display = 'block';
} else {
el.style.display = 'none';
}
}
点击按钮时，元素会在隐藏和显示之间切换。
4. 注意事项
- display: none 会让元素完全从渲染树中移除，不占空间
- 如果元素原本是内联元素（如 span），恢复显示时可使用 display: inline；若是块级元素，则用 block
- visibility: hidden 虽然也能隐藏，但元素仍占空间，与 display: none 不同
基本上就这些。掌握 display 的切换，就能灵活控制页面元素的显隐效果。
