HTMLdisplaynonevisibilityhidden格式属性区别-html教程-PHP中文网

HTMLdisplaynonevisibilityhidden格式属性区别

雪夜

发布： 2025-09-26 23:19:01

原创

494人浏览过

display: none彻底移除元素且不占空间，visibility: hidden仅隐藏但保留布局位置。前者引发重排，后者仅重绘且性能更优，子元素可独立显示。

htmldisplaynonevisibilityhidden格式属性区别

display: none 和 visibility: hidden 都可以用来隐藏网页元素，但它们的隐藏方式和对页面布局的影响完全不同。

display: none 的作用

使用 display: none 会完全从文档流中移除元素，相当于这个元素不存在。

创意抽象活动促销海报矢量模板

创意抽象活动促销海报矢量模板适用于企业产品宣传（公司介绍手册、产品目录）、文化与艺术活动（艺术展览手册、文化节庆活动宣传）、商业及零售促销（季节性销售活动、特别优惠促销册）、健康与美容行业等相关等相关视觉场景设计的AI格式素材。

查看详情

• 元素不占据任何空间，周围内容会重新排列填补空位
• 不可点击、不可聚焦，也无法通过 JavaScript 获取焦点
• 子元素也会一同被隐藏，无论其自身 display 值如何
• 对屏幕阅读器等辅助工具来说，该元素通常被视为不存在

visibility: hidden 的作用

使用 visibility: hidden 只是让元素不可见，但它仍然存在于页面中并保留原有空间。

• 元素继续占据布局中的位置，周围元素不会移动
• 不可见，但依然可以响应某些 JavaScript 事件（取决于具体设置）
• 子元素可通过设置 visibility: visible 来重新显示
• 对无障碍访问工具可能仍能读取到该内容

关键区别总结

• 空间占用：display: none 不占空间；visibility: hidden 保留空间
• 布局影响：display: none 引起重排（reflow）；visibility: hidden 只触发重绘（repaint）
• 继承性：visibility 是可继承的，子元素会默认跟随父级隐藏状态（除非单独设置）
• 性能表现：频繁切换时，visibility: hidden 性能更好，因不引起布局变化基本上就这些。根据是否需要保留空间和布局稳定性来选择合适的方式。

以上就是HTMLdisplaynonevisibilityhidden格式属性区别的详细内容，更多请关注php中文网其它相关文章！