三个属性分别是什么？

opacity – MDN 详细讲解

• 定义：指定了一个元素的透明度 （filter: alpha（opacity = 0-100））
• 值：number 类型的值，0~1，如果超过范围，则按最接近的范围值展示，如值为 999 的时候，是按 1 展示。默认为 1，同样，值为-999 时，是按 0 展示
• 兼容性：很好。除了 IE9 之前（详细到各浏览器版本号就看文档
• 关注点：什么是透明，是否还存在文档流中，对子元素影响呢？

visibility – MDN 详细讲解

• 定义：显示或隐藏元素而不更改文档的布局。其中 collapse 值，还可以隐藏 table 中的行或列。
• 值：关键值有三个，分别如下。
  • visible，默认值，正常展示
  • hidden，隐藏元素，不改变布局，但子元素如果设置为 visibility: visible，则该子元素可见（很有意思的一个属性）
  • collapse，应用于 table 表格。
• 兼容性：css2 的属性，应该都能兼容吧（没 Windows
• 关注点：和 opacity 的透明度有什么区别？

display – MDN 详细讲解

• 定义：指定了元素的显示类型，包含两类基础特征，用于指定元素怎样生成盒模型。 外部显示类型定义了元素怎么参与流式布局的处理。内部显示类型定义了子元素的布局方式， 详细可以看看语法部分)
• 值：很多值，其中 none 属于 display-box。被设置成 none 的元素，将从可访问性树中移除，包括其子元素在内。
• 兼容性：基本支持
• 关注点：对页面重绘有没性能影响？是否可与别的属性连用？

表格对比

三者的优劣和应用场景

绑定事件

• opacity：从表格可得知，opacity 的隐藏，只是透明度 100%，看不见了，但还在页面中且可以通过 z-index 等方式遮挡其他元素，同时绑在在该元素上的事件依旧能触发。应用场景可以有：移动端使用 input、select 加 div，自定义样式，其中 input、select 层级在 div 上面，并设置 opacity 为 0
• visibility：这个属性是隐藏，意味着不能聚焦了还占据页面空间。但其子元素可以设置属性值为 visible，就能正常显示。应用场景：父元素隐藏，子元素根据一定条件某些展示某些隐藏。可以做一个闪闪发光的星空？
• display none 就不存在页面中了，可以理解为完全的消失。优点即应用场景，如果是流式布局，让一个元素隐藏且不占据空间，就使用这个属性值了。

性能方面

• opacity 由于只是透明度变化，就还好，visibility 是元素隐藏，需要重绘，disable 是元素消失，也是需要。
• 应用方面，需要频繁切换状态时，在 display 和 opacity 中，可以选择后者，不频繁时，none 也可以。

遇到新的理解再补充