刘勇虎的官方网站

• 相同点
• 区别
  • 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。

注意事项

1. 性能优化：在频繁切换显示和隐藏的场景中，优先考虑使用 visibility: hidden; 或 opacity: 0;，以减少页面回流的影响。
2. 事件绑定：如果需要在隐藏的元素上绑定事件，建议使用 opacity: 0; 而不是 display: none; 或 visibility: hidden;。
3. 子元素继承：在使用 visibility 和 opacity 时，注意子元素的继承问题，必要时进行显式设置。

总结

visibility、display 和 opacity 在实现元素的显示和隐藏方面各有特点。display: none; 适用于需要完全移除元素的场景，visibility: hidden; 适用于需要保留元素位置的场景，opacity: 0; 适用于需要实现透明度过渡效果的场景。希望本文对您有所帮助！