浅谈visibility，display，opacity的区别

同步发布于我的网站 🚀

• 雷同点
  
• 区别
  
  
  
  • 1. 性能比力
    
  • 2. 是否占据空间
    
  • 3. 动画效果
    
  • 4. 变乱绑定
    
  • 5. 子元素继承
    
  
  
• 实际应用场景
  
  
  
  • display: none;
    
  • visibility: hidden;
    
  • opacity: 0;
    
  
  
• 留意事项
  
• 总结
  

雷同点

visibility 和 display 都能实现元素的表现和潜伏，但它们在具体的运动上有明显的差别。opacity 则紧张用于控制元素的透明度。

• display: none;：潜伏元素，元素不占用文档流中的空间。
  
• display: block;：表现元素，元素作为块级元素表现。
  
• display: inline;：表现元素，元素作为行内元素表现。
  
• display: inline-block;：表现元素，元素作为行内块级元素表现。
  
• visibility: hidden;：潜伏元素，元素仍然占用文档流中的空间。
  
• visibility: visible;：表现元素。
  
• opacity: 0;：元素视觉上消散，透明度为 0，但仍然占用文档流中的空间，欣赏器会分析该元素。
  

区别

1. 性能比力

• display: none;：切换表现时，页面会产生回流（回流：当页面中的一部分元素须要改变规模尺寸、布局、表现潜伏等，页面重新构建，此时就是回流）。回流会导致页面重新渲染，影响性能。
  
• visibility: hidden;：切换表现时，不会引起回流，由于元素仍然存在于文档流中，只是不可见。
  
• opacity: 0;：不会引起回流，由于元素仍然存在于文档流中，只是透明度为 0。
  

2. 是否占据空间

• display: none;：元素彻底消散，不在文档流中占位，欣赏器也不会分析该元素。
  
• visibility: hidden;：元素视觉上消散，但仍然占据文档流中的空间，欣赏器会分析该元素。
  
• opacity: 0;：元素视觉上消散，但仍然占据文档流中的空间，欣赏器会分析该元素。
  

3. 动画效果

• display: none;：transition 对于 display 是无效的，无法实现平滑的表现/潜伏过渡效果。
  
• visibility: hidden;：transition 对于 visibility 是无效的，无法实现平滑的表现/潜伏过渡效果。
  
• opacity: 0;：transition 对于 opacity 是有用的，可以实现平滑的透明度过渡效果。
  

4. 变乱绑定

• display: none;：元素在页面上已经不存在，以是在它上面绑定的变乱无法触发。
  
• visibility: hidden;：元素固然占据肯定空间，但在它上面绑定的变乱是无法触发。
  
• opacity: 0;：元素仍然存在并占据空间，以是在它上面绑定的变乱可以触发。
  

5. 子元素继承

• display: none;：不会被子元素继承，给子元素设置 display: block; 子元素不会表现。
  
• visibility: hidden;：会被子元素继承，可以通过设置子元素 visibility: visible; 让子元素表现出来。
  
• opacity: 0;：会被子元素继承，给子元素设置 opacity: 1; 子元素不会表现。
  

实际应用场景

display: none;

• 潜伏表单元素：当须要完全移除某个表单元素时，利用 display: none;。
  
• 动态加载内容：当须要根据用户操纵动态加载内容时，先将内容设置为 display: none;，然后在须要时表现。
  

visibility: hidden;

• 潜伏工具提示：当须要潜伏工具提示但保存其位置时，利用 visibility: hidden;。
  
• 布局调解：当须要调解布局但不想影响其他元素的位置时，利用 visibility: hidden;。
  

opacity: 0;

• 淡入淡出效果：当须要实现元素的淡入淡出效果时，利用 opacity 团结 transition。
  
• 图层叠加：当须要在多个图层之间举行透明度调解时，利用 opacity。
  

留意事项

• 性能优化：在频仍切换表现和潜伏的场景中，优先思量利用 visibility: hidden; 或 opacity: 0;，以淘汰页面回流的影响。
  
• 变乱绑定：如果须要在潜伏的元素上绑定变乱，发起利用 opacity: 0; 而不是 display: none; 或 visibility: hidden;。
  
• 子元素继承：在利用 visibility 和 opacity 时，留意子元素的继承标题，须要时举行显式设置。
  

总结

visibility、display 和 opacity 在实现元素的表现和潜伏方面各有特点。display: none; 实用于须要完全移除元素的场景，visibility: hidden; 实用于须要保存元素位置的场景，opacity: 0; 实用于须要实现透明度过渡效果的场景。盼望本文对您有所资助！