前端面试题：设置元素显示隐藏的几种方式与它们之间的区别是什么？

前端面试题：设置元素显示隐藏的几种方式与它们之间的区别是什么？

常见隐藏元素的方法有opacity:0; visibility:hidden; display:none; transform:scale(0);height:0px;
他们之间的区别是：

opacity：0; 是把透明度设置为0，但是这个元素还是真实存在的，只是看不见了而已，他在页面中依然占位，所有的点击事件也都是可以触发的；

visibility:hidden; 他在页面中的效果和opacity：0；有一点相似，他也是看不见的，并且在页面中依然占位，但是不同的是它不能够触发点击事件；

display：none；和他们就不一样了，它属于是完全删除的状态，相当于不存在于页面当中了，因此它不占位，也不能触发点击事件。

transform:scale(0);使用缩放,按照x和y的中心位置进行缩小占位置

height:0px;的时候不占页面空间如果元素中有文本的话需要给元素添加oveflow:hidden;font-size:0px