css中让元素消失的方法

2023-08-09 14:47| 来源: 网络整理| 查看: 265

如何让一个元素消失

当然这也是一道面试常考的题目

文章目录如何让一个元素消失前言一、面试题二、方法1.全部方法2.方法区别总结

前言

本篇文章主要总结了，如何让元素消失在可视窗口，当然有的方法，这个“消失”是带引号的，并不是真正的消失，只是你看不见了。

一、面试题

你知道如何让元素在页面中消失吗，你有多少中方法呢？当然最怕的问题就是，还有吗？额。。。还有吗？额。。。还有吗？额。。。【笑哭】

二、方法 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是有效。总结如果还有什么方法，欢迎评论互相学习，如有错误，欢迎指正。

【本文地址】

公司简介

联系我们