如何让一个元素消失
当然这也是一道面试常考的题目
文章目录
前言
本篇文章主要总结了，如何让元素消失在可视窗口，当然有的方法，这个“消失”是带引号的，并不是真正的消失，知识你看不见了。
一、面试题
你知道如何让元素在页面中消失吗 ，你有多少中方法呢？
当然最怕的问题就是，还有吗？额。。。还有吗？额。。。还有吗？额。。。【笑哭】
二、方法
1.全部方法
1、display:none
2、visibility:hidden
3、opacity:0
4、position移除到窗口外面
5、z-index进行层次的遮盖
2.方法区别
一、是否占据空间
display:none，隐藏之后不占位置；
visibility:hidden、opacity:0，隐藏后任然占据位置。
二、子元素是否继承
display:none---不会被子元素继承，父元素都不存在了，子元素也不会显示出。
visibility:hidden---会被子元素继承，通过设置子元素visibility:visible来显示子元素。
opacity:0---会被子元素继承，但是不能设置子元素opacity:0来重新显示。
三、事件绑定
display:none 的元素都已经不再页面存在了，因此无法触发它绑定的事件。
visibility:hidden 不会触发它上面绑定的事件。
opacity: 0元素上面绑定的事件是可以触发的。
四、过渡动画
transition对于display是无效的。
transition对于visibility是无效的。
transition对于opacity是有效。