display与visibility均可隐藏元素，但display: none不占空间且触发重排，visibility: hidden保留空间仅不可见，适用于布局稳定或动画场景。
在CSS中，控制元素的显示与隐藏主要有两种方式：display 和 visibility。虽然它们都能让元素“看不见”，但作用机制和效果不同，使用时需根据实际需求选择。
1. 使用 display 控制显示与隐藏
display 属性用于定义元素的布局方式，同时也常用来彻底显示或隐藏元素。
常见取值：display: block;：元素以块级形式显示display: inline;：元素以内联形式显示display: none;：元素完全隐藏，不占据页面空间
当设置为 display: none; 时，元素从文档流中移除，其原本占据的空间也会被释放，页面会重新布局。
示例：
div { display: none; /* 元素隐藏，不占空间 */}
2. 使用 visibility 控制可见性
visibility 属性用于控制元素是否可见，但不影响布局。
Reclaim.ai
为优先事项创建完美的时间表
90 查看详情
立即学习“前端免费学习笔记（深入）”；
常见取值：visibility: visible;：元素可见visibility: hidden;：元素隐藏，但仍占据原有空间
与 display 不同，visibility: hidden; 只是让元素“看不见”，但它依然存在于页面中，会影响布局，周围元素不会向它位置移动。
示例：
span { visibility: hidden; /* 元素隐藏，但保留空间 */}
3. display 与 visibility 的主要区别
空间占用：display: none 完全移除元素；visibility: hidden 保留空间重排与重绘：display 会触发页面重排（reflow）；visibility 通常只触发重绘（repaint）子元素影响：display: none 会使所有子元素不可见且不渲染；visibility: hidden 的子元素可通过设置 visibility: visible 恢复显示动画支持：visibility 支持过渡动画（如配合 opacity），display 不支持过渡
4. 实际应用场景建议
需要彻底隐藏元素并释放空间 —— 使用 display: none只想隐藏元素但保持布局稳定 —— 使用 visibility: hidden做切换显示/隐藏动画时，可结合 visibility + opacity + transition频繁切换显示状态时，若不想引起布局抖动，优先考虑 visibility
基本上就这些。掌握 display 和 visibility 的差异，能更精准地控制页面结构与视觉表现。
以上就是如何通过css设置元素显示隐藏display与visibility的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/999371.html
微信扫一扫 
支付宝扫一扫 
