visibility:hidden和display:none的区别

有时候我们在对前端网页布局的过程中，会碰到需要得把某个元素给隐藏起来，这个时候我们一般有两种做法：

1. display:none，设置这个属性后，该元素可以理解成从页面上完全消失了，元素在网页所占的位置也没有了，看不见也摸不着，而且会导致页面的重绘和重排，同时还触发不了点击事件
2. visibility:hidden，设置这个属性后，该元素可以理解成我们肉眼看不见但是在网页中该占的位置还是占着，也就是看不见但摸得着，只会导致页面的重绘，但不可以触发点击事件（插个题外话：设置元素opacity:0之后，是可以触发点击事件的）