visibility与display区别全解析

**visibility与display区别详解：CSS隐藏元素的奥秘** 在网页开发中，CSS的`visibility`和`display`属性都用于控制元素的显示与隐藏，但它们之间存在着关键区别。`visibility: hidden`隐藏元素，但仍占据页面空间，不影响其他元素的布局，且子元素无法突破父元素的隐藏状态。而`display: none`则完全移除元素，使其不占据任何空间，导致页面重排。理解它们在空间占用、布局影响、继承性和过渡支持上的差异，能帮助开发者根据实际需求，选择最合适的隐藏方式，优化网页性能和用户体验。本文将深入解析`visibility`和`display`的区别，助你掌握CSS隐藏元素的精髓。

visibility: hidden隐藏元素但保留空间，不影响布局，子元素无法显示；2. display: none完全移除元素且不占空间，触发重排，子元素同步隐藏；3. 关键区别在于空间占用、布局影响、继承性和过渡支持，根据是否需保留位置选择使用方式。

visibility 和 display 都是CSS中控制元素显示与隐藏的属性，但它们在行为和布局影响上有本质区别。

1. visibility: 控制可见性但保留空间

使用 visibility 属性可以控制元素是否可见，常见取值为 visible 和 hidden。

• visibility: hidden; 会让元素不可见，但仍然占据文档中的布局空间。
• 元素隐藏后，其位置仍被保留，周围的元素不会重新排列。
• 子元素无法通过设置 visibility: visible 来强制显示，如果父元素是 hidden。

示例：

2. display: 控制是否渲染及文档流

display 属性决定元素是否渲染以及以何种方式参与文档流，常用值如 block、inline、none 等。

• display: none; 完全从渲染树中移除元素，不占任何空间。
• 元素消失后，页面会重新布局，周围元素会填补其位置。
• 子元素也会一同被移除，无论其 display 值如何。

示例：

3. 关键区别总结

• 空间占用：visibility: hidden 保留空间；display: none 不保留空间。
• 布局影响：visibility 不触发重排；display 会触发页面重排。
• 继承性：visibility 是可继承的，子元素受父级 hidden 影响；display 不可继承，但元素本身为 none 时子元素也不显示。
• 动画与过渡：visibility 支持 transition（如配合 opacity 实现淡出）；display 不能过渡，因为它不是渐变属性。

今天关于《visibility与display区别全解析》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！