display:none、visibility:hidden和opacity:0的区别

是否脱离文档流

• display:none：使元素脱离文档流，不占据原来的空间，会引起页面的重排
• visibility:hidden：不会脱离文档流，元素不可见仍然占据原来的位置
• opacity:0：同 visibility:hidden

继承

• display:none：子元素仍具有 display 属性，与父元素一起隐藏
• visibility:hidden：子元素设置为 visibility:visible，可以单独显示
• opacity:0：同 display:none

事件

• display:none：无法添加事件
• visibility:hidden：无法添加事件
• opacity:0：可以添加事件

---

【Java面试题与答案】整理推荐

• 基础与语法
• 集合
• 网络编程
• 并发编程
• Web
• 安全
• 设计模式
• 框架
• 算法与数据结构
• 异常
• 文件解析与生成
• Linux
• MySQL
• Oracle
• Redis
• Dubbo