【每日一问】visibility:hidden和display:none的区别？

用简短语言讲明白一个知识点。每日一问，聚沙成塔！

结论

• visibility：hidden
  ○ 元素占据文档流空间
  ○ 触发重绘
  ○ 子元素继承隐藏属性，但可以单独设置子元素显示
  ○ 无法触发鼠标事件，可触发部分键盘事件
  ○ 支持过渡动画
• display: node
  ○ 元素不占文档里空间
  ○ 触发回流及重绘
  ○ 子元素彻底隐藏
  ○ 无法触发事件
  ○ 不支持过渡动画

1. 空间占据

• visibility
  元素不可见，但保留原有布局空间，隐藏后仍占据文档流位置
• display
  元素完全从文档流中移除，不占据任何空间，导致其他元素重新布局

2. 渲染影响

• visibility
  仅触发重绘，不会引发回流
• display
  触发回流和重绘，可能导致更高的性能消耗

3. 子元素继承特性

• visibility
  子元素继承隐藏属性，但可以通过设置visibility:visible单独显示
• display
  子元素随父元素隐藏，无法通过子元素属性覆盖显示

4. 交互事件

• visibility
  元素无法触发鼠标事件（如点击、悬停），但可响应部分键盘事件（通过Tab键导航到隐藏元素并使用Enter触发点击事件）
• display
  元素完全移除，无法触发事件

5. 动画支持

• visibility
  支持css过渡动画，可配合延迟实现动态效果
• display
  不支持过度动画，无法通过动画切换显示状态

6. 其他特性

• visibility
  不影响计数器（如列表序号）的连续计数
• display
  可能导致读屏器忽略内容（因元素被移除）