关于CSS中opacity:0, visibility:hidden, display:none的对比区别

---

前言

前几天参加笔试的时候被考到opacity这个CSS属性，因为平时自己写代码没用过，所以懵了，现在特此总结一下

---

opacity:0

这个属性是设置元素透明度用的，设置opacity:0后元素会直接变成透明，但还会占用着页面元素的位置，并且设置的事件能够触发。相当于一个透明人站在你面前，虽然看不见，但依旧能触摸到。

visibility:hidden

这个属性是设置元素是否可见的，设置visibility:hidden后元素就会被隐藏（hidden），和opacity类似，依旧占用着页面元素的位置，但却不能触发其中绑定的事件。你眼前的透明人不仅看不见，而且变成了空气，无法触摸。

display:none

这个属性是设置元素展示（display）的方式，当把元素设置为display:none后，该元素不会占用页面位置，如果周围有其他元素的话，会补上它空出来的位置，元素都不在了所以就无法触发绑定事件了。你眼前的人直接人间蒸发了。

---

总结

这三个CSS属性的区别不止如此，在其他方面还可以说的继续细说，暂时简单总结到这，后续继续补充。