display: none彻底移除元素且不占空间，visibility: hidden仅隐藏但保留布局位置。前者引发重排，后者仅重绘且性能更优，子元素可独立显示。
display: none 和 visibility: hidden 都可以用来隐藏网页元素，但它们的隐藏方式和对页面布局的影响完全不同。
display: none 的作用
使用 display: none 会完全从文档流中移除元素，相当于这个元素不存在。
• 元素不占据任何空间，周围内容会重新排列填补空位
• 不可点击、不可聚焦，也无法通过 JavaScript 获取焦点
• 子元素也会一同被隐藏，无论其自身 display 值如何
• 对屏幕阅读器等辅助工具来说，该元素通常被视为不存在
visibility: hidden 的作用
使用 visibility: hidden 只是让元素不可见，但它仍然存在于页面中并保留原有空间。
• 元素继续占据布局中的位置，周围元素不会移动
• 不可见，但依然可以响应某些 JavaScript 事件（取决于具体设置）
• 子元素可通过设置 visibility: visible 来重新显示
• 对无障碍访问工具可能仍能读取到该内容
关键区别总结
• 空间占用：display: none 不占空间；visibility: hidden 保留空间
• 布局影响：display: none 引起重排（reflow）；visibility: hidden 只触发重绘（repaint）
• 继承性：visibility 是可继承的，子元素会默认跟随父级隐藏状态（除非单独设置）
• 性能表现：频繁切换时，visibility: hidden 性能更好，因不引起布局变化基本上就这些。根据是否需要保留空间和布局稳定性来选择合适的方式。
以上就是HTMLdisplaynonevisibilityhidden格式属性区别的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1579100.html
微信扫一扫 
支付宝扫一扫 
