css隐藏元素的几种方式及区别 display:none visibility:hidden opacity 元素隐藏

元素的显示和隐藏

display:none

元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘，并且不会触发它的点击事件。

visibility:hidden

元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排，也无法触发它的点击事件

opacity:0

将元素的透明度设置为0后，也可以视为一种隐藏，这算是一种隐藏元素的方法。和visibility:hidden的一个共同点是元素隐藏后依旧占据着空间，但我们都知道，设置透明度为0后，元素只是隐身了，它依旧存在页面中，所以依然可以触发点击事件。

设置height，width等盒模型属性为0

将元素的margin，border，padding，height和width等影响元素盒模型的属性设置成0，如果元素内有子元素或内容，也应该设置其overflow:hidden来隐藏其子元素，这也算是一种隐藏元素的方法。如果全部属性都设置为0，很显然，这个元素相当于消失了，所以无法触发它的点击事件。

总结

显示隐藏方式	是否占据空间	是否导致浏览器重排重绘	能否触发点击事件
display : none	不占空间	会导致浏览器重排和重绘	不会触发其点击事件
visibility : hidden	占空间	不会导致浏览器重排和重绘	不会触发其点击事件
opacity : 0	占空间	不会导致浏览器重排和重绘	会触发其点击事件
设置height，width等盒模型属性为0	设置为0后不占空间	可能会导致浏览器重排和重绘	设置为0后不会触发其点击事件