visibility: hidden隐藏元素但保留空间，不影响布局，子元素无法显示；2. display: none完全移除元素且不占空间，触发重排，子元素同步隐藏；3. 关键区别在于空间占用、布局影响、继承性和过渡支持，根据是否需保留位置选择使用方式。
visibility 和 display 都是CSS中控制元素显示与隐藏的属性，但它们在行为和布局影响上有本质区别。
1. visibility: 控制可见性但保留空间
使用 visibility 属性可以控制元素是否可见，常见取值为 visible 和 hidden。
音疯
音疯是昆仑万维推出的一个AI音乐创作平台，每日可以免费生成6首歌曲。
146 查看详情 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 不能过渡，因为它不是渐变属性。基本上就这些。根据是否需要保留布局空间来选择合适的方式。
以上就是css属性visibility与display区别对比的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1055155.html
微信扫一扫 
支付宝扫一扫 
