opacity 用来设置透明度display 定义建立布局时元素生成的显示框类型visibility 用来设置元素是否可见。opacity、visibility、display 这三个属性分别取值 0、hidden、none 都能使元素在页面上看不见但是他们在方方面面都还是有区别的。‌visibility: hidden‌元素‌不可见‌但‌仍占据页面空间‌。‌不会触发用户交互事件‌如点击、悬停等。‌子元素可单独设置visibility: visible使其显示‌。‌读屏软件不会读取‌该元素内容。‌支持transition动画‌但因“大于 0 就显示”‌不支持淡入淡出效果‌。opacity: 0‌元素‌完全透明‌但‌仍占据页面空间‌。‌仍能触发用户交互事件‌如点击、悬停等。‌子元素继承透明度‌即使设置opacity: 1也无法完全恢复不透明。‌读屏软件仍可读取‌该元素内容。‌完美支持transition动画‌适合实现淡入淡出效果需要‌保留布局但隐藏内容‌且‌不希望交互‌ → 用visibility: hidden。需要‌实现动画效果‌如淡出 → 用opacity: 0。需要‌完全移除元素‌不占空间、不渲染 → 用display: none。