前言

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

opacity:0

这个属性是设置元素

透明度

用的，设置opacity:0后元素会直接变成透明，但还

会占用着页面元素的位置

，并且设置的

事件能够触发

。相当于一个透明人站在你面前，虽然看不见，但依旧能触摸到。

visibility:hidden

这个属性是设置元素

是否可见

的，设置visibility:hidden后元素就会被隐藏（hidden），和opacity类似，依旧

占用着页面元素的位置

，但却

不能触发

其中绑定的事件。你眼前的透明人不仅看不见，而且变成了空气，无法触摸。

display:none

这个属性是设置元素

展示

（display）的方式，当把元素设置为display:none后，该元素

不会占用

页面位置，如果周围有其他元素的话，会补上它空出来的位置，元素都不在了所以就

无法触发

绑定事件了。你眼前的人直接人间蒸发了。

总结

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