前言
前几天参加笔试的时候被考到opacity这个CSS属性,因为平时自己写代码没用过,所以懵了,现在特此总结一下
opacity:0
这个属性是设置元素透明度用的,设置opacity:0后元素会直接变成透明,但还会占用着页面元素的位置,并且设置的事件能够触发。相当于一个透明人站在你面前,虽然看不见,但依旧能触摸到。
visibility:hidden
这个属性是设置元素是否可见的,设置visibility:hidden后元素就会被隐藏(hidden),和opacity类似,依旧占用着页面元素的位置,但却不能触发其中绑定的事件。你眼前的透明人不仅看不见,而且变成了空气,无法触摸。
display:none
这个属性是设置元素展示(display)的方式,当把元素设置为display:none后,该元素不会占用页面位置,如果周围有其他元素的话,会补上它空出来的位置,元素都不在了所以就无法触发绑定事件了。你眼前的人直接人间蒸发了。
总结
这三个CSS属性的区别不止如此,在其他方面还可以说的继续细说,暂时简单总结到这,后续继续补充。