CSS中用display实现元素的显示/隐藏切换

** 通过display中的none和block **

在前端开发中，display: none 和 display: block 是两种常用的 CSS 显示模式，核心区别在于：是否在页面中保留元素的占位空间

1. 核心区别

属性	display: none	display: block
占位空间	元素完全从渲染树中移除，不占据空间	元素作为块级元素显示，独占一行，占据空间
子元素	所有子元素也会被隐藏，无法交互	子元素正常显示，可交互
重排重绘	触发重排（reflow）和重绘（repaint）	仅在首次渲染或布局变化时触发
过渡动画	不支持过渡效果（直接消失/显示）	支持宽度、高度等属性的过渡动画
无障碍	屏幕阅读器无法访问	正常访问

2. 应用场景

（1）display: none

• 临时隐藏元素：如模态框关闭、下拉菜单收起。
• 条件渲染：根据用户交互或数据状态决定是否显示元素。
• 性能优化：在不需要显示的元素上使用，减少渲染负担。

（2）display: block

• 强制元素换行 ：如将 <span> 转为块级元素。
• 创建独立容器 ：如 <div>、<p> 等默认块级元素。
• 与 display: none 配合：实现元素的显示/隐藏切换。

3. 示例代码

（1）显示/隐藏切换

<button onclick="toggleElement()">切换显示</button>
<div id="target" style="background: lightblue;">内容</div>

<script>
function toggleElement() {
  const element = document.getElementById('target');
  element.style.display = element.style.display === 'none' ? 'block' : 'none';
}
</script>

（2）转为块级元素

span {
  display: block; /* 将内联元素转为块级元素，独占一行 */
  margin-bottom: 10px;
}

4. 替代方案

（1）visibility: hidden

• 区别：元素隐藏但仍占据空间，子元素同样隐藏但可通过 JavaScript 访问。
• 应用：需要保留布局占位的场景（如表格中的某列临时隐藏）。

（2）opacity: 0

• 区别：元素完全透明，但仍在页面中占据空间且可交互。
• 应用：需要元素仍能接收点击事件的场景（如加载蒙层）。

5. 性能考虑

• 频繁切换 ：display: none/block 会触发重排，频繁操作可能影响性能，建议优先使用 opacity 或 visibility。
• 动画效果 ：若需要平滑过渡，可使用 opacity 配合 transition，而非直接切换 display。

总结

场景	推荐属性	原因
完全移除元素且不保留空间	display: none	彻底从渲染树中移除
隐藏元素但保留占位	visibility: hidden	保留布局空间，无障碍问题
透明效果但仍可交互	opacity: 0	元素仍在页面中，可接收事件