今天分享一个关于CSS的知识点
如何隐藏一个元素?
- CSS
-
- display:none
-
- opacity:0
-
- visibili: hidden
这是我所能列举出来的方式，相信所有的开发者都会想到
当然还有其他操作: 比如将元素移出可视区范围内，大多数网站的logo就是这个操作吧
后来又查到还可以通过HTML5中提供的 [hidden](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/hidden) 属性去隐藏, 坦白说作为一个面向搜索引擎的开发者我还真没用过🤣🤣🤣🤣
它隐藏元素的表现和
display:none类似，并且一个拥有hidden属性的元素，如果在css中设置display相关内容,hidden的表现行为会被覆盖
下面主要在这个问题的基础上拓展两个知识点
三种隐藏元素的方式，哪个可以对元素进行点击操作
- display:none
不可以，因为这种设置方式下文档渲染得好像这个元素并不存在，所以自然不能进行点击操作
- opacity:0
元素真实存在的,并且是会渲染的，只是视觉上看不见，所以它拥有正常dom的所有功能
- visibility:hidden
这个是不是就需要思考一下了？我第一次也会在脑海中思考下,思来想去想到了一个错误答案🤣下边我们就来探索下真理
- 第一步打开MDN中关于visibility的介绍
我们会发现描述中有这么一句话元素无法获取获得焦点
- 这就是导致我们不能进行交互的原因
三种隐藏元素的方式中，那种情况下子元素是可以显示的
display:none
- 就不讨论了，父元素直接不渲染在页面上，子元素谈何显示
opacity:0
- 这里又是一个会让人疑惑的点
- 第一步打开MDN中关于opacity的介绍
- 在MDN中已经描述的很清楚了
visibility:hidden
- 同样也描述的很清楚
没用的小知识又增加了😎
可能在开发中也没啥大用处，但是学习嘛，就是一步一步的去探索，去拓展自己的知识面，这就是学习的乐趣所在啦 如果有其他更好的方法也欢迎大家提出来，我们互相学习
