display:none、visibility:hidden、opacity:0 和 visually-hidden 有什么区别？
简化版
display:none 会让元素不参与布局且通常不进可访问性树；visibility:hidden 保留布局占位但不可见；opacity:0 仍占位也可能可点击；visually-hidden 是视觉隐藏但保留给屏幕阅读器，适合无障碍文本。
详细版
- display:none 会移除盒子，布局空间消失，子元素也不可见。
- visibility:hidden 保留盒子空间，但元素不可见，通常不可交互。
- opacity:0 只是透明，元素仍在布局和命中测试中，可能挡住点击。
- visually-hidden 常用于给图标按钮、跳转链接、表单提示提供屏幕阅读器文本。
- 隐藏方式要按目标选择：隐藏布局、隐藏视觉、隐藏交互、隐藏但保留可访问性不是一回事。
完整版教学
易错点：看不见不等于不存在，也不等于屏幕阅读器读不到。隐藏方式必须按语义目标选。
一、这题真正考什么
易错点：看不见不等于不存在，也不等于屏幕阅读器读不到。隐藏方式必须按语义目标选。
面试官不是只想听定义，而是想看你能不能把 CSS 规则、浏览器渲染、工程维护和用户体验连起来。回答这类题时，先讲机制，再讲例子，最后讲排查方法和边界。
二、底层机制怎么理解
浏览器处理元素有多棵树：DOM 树、渲染树、布局盒、命中测试和可访问性树。不同隐藏方式影响的树不同，因此会出现“看不见但挡点击”“不占位但读不到”“视觉隐藏但读屏可读”等差异。面试要把布局、交互和无障碍三个维度分开讲。
CSS 面试题的关键通常在“规则为什么这样生效”。只要能讲清浏览器按什么顺序匹配、计算、布局和绘制，就不会停留在背属性名的层面。
三、带数字的小推演
一个关闭的下拉菜单如果用 opacity:0 隐藏，可能仍覆盖页面按钮，导致用户点不到后面的内容；如果图标按钮只有一个 SVG，给文字标签用 visually-hidden，可以让视觉保持简洁，同时让屏幕阅读器读出“搜索”。
下面把判断过程压成几条可复用规则，面试时可以直接照这个顺序推：
隐藏选择 = 是否占布局 + 是否可交互 + 是否进可访问性树
display:none：无布局、无视觉、通常无可访问性
opacity:0：有布局、透明、可能仍可交互四、浏览器处理流程
可以把它放进浏览器处理链路里看：
DOM 节点存在
|
display 决定是否生成盒子
|
visibility/opacity 影响绘制可见性
|
pointer-events/可聚焦性影响交互
|
ARIA 和 CSS 共同影响可访问性体验流程图能帮你避免两个常见问题：一是把 CSS 属性当成孤立开关，二是忽略父级、上下文和渲染阶段的影响。真正排查线上样式问题时，沿流程定位通常比随机改 CSS 更快。
五、对比表格
| 方式 | 是否占位 | 是否可交互 |
|---|---|---|
| display:none | 否 | 否 |
| visibility:hidden | 是 | 通常否 |
| opacity:0 | 是 | 可能是 |
| visually-hidden | 通常不影响布局 | 给读屏保留文本 |
| hidden 属性 | 否 | 否 |
对比题不要只背结论，要主动补一句“适合什么场景”。CSS 的很多选择没有绝对优劣，只有是否符合布局、可维护性、性能和可访问性目标。
六、工程实践和排查思路
- 用 opacity 隐藏弹层时要同步处理 pointer-events、焦点和 aria-hidden。
- 用 display:none 隐藏错误提示时，屏幕阅读器可能无法及时读到变化，需要结合 aria-live 设计。
- 使用 DevTools 时要同时看 matched rules、computed style、layout、accessibility 和 event listeners，避免只盯着源码。
- 组件库项目要把这类规则沉淀成 token、基础样式或 lint 约束，否则同类问题会反复出现。
七、常见误区与追问
- 误区：元素看不见就不会影响点击。 需要补上浏览器机制、适用条件和反例，避免把经验口诀当成规则本身。
- 误区：display:none 和 visibility:hidden 只是动画效果不同。 需要补上浏览器机制、适用条件和反例，避免把经验口诀当成规则本身。
- 误区：可访问性文本可以随便用 display:none 隐藏。 需要补上浏览器机制、适用条件和反例，避免把经验口诀当成规则本身。
- 追问：visually-hidden 常见 CSS 怎么写？ 先给判断标准，再结合代码、浏览器行为和工程约束说明取舍。
- 追问：隐藏弹窗时如何处理焦点？ 先给判断标准，再结合代码、浏览器行为和工程约束说明取舍。
- 追问：aria-hidden 和 CSS 隐藏有什么关系？ 先给判断标准，再结合代码、浏览器行为和工程约束说明取舍。
八、加强记忆
按“三问”记：占不占位，挡不挡交互，读屏读不读。只要把这三问答清楚，隐藏元素相关追问基本都能接住。
复习 HTML/CSS 高频题时，可以固定按“定义、触发条件、浏览器流程、代码例子、工程风险、排查工具”六步组织答案。这样不会只停留在背概念，也更像真实前端开发者。