** 通过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 | 元素仍在页面中，可接收事件 |
