菲洛嘉青春动能素135HA FILLMED® NCTF 135HA LED指示灯的常见故障分析 智微智能 Elkhartlake K075终端,零售产业新选择 天空蓝拓客管理系统详细介绍版 muso公链项目 天使计划 是什么?[秘] 独家揭秘最前沿的家装“黑科技”——掌赋 天博体育欧洲杯特辑,东道主法兰西的失意2016 亚马逊的送货侦察员 学习听起来像挡泥板 Google Comics Factory使ML变得容易 笑着说-男性或女性 Amazon Rekognition中更好的人脸检测 关于Spaun的真相-大脑模拟 两个聊天机器人彼此聊天-有趣又怪异 GANPaint:将AI用于艺术 WCF和WF给予社区 从耳朵到脸 所有神经网络的深层缺陷 蠕虫在尾巴上平衡杆子 Kickstarter上的OpenCV AI套件 TensorFlow-Google的开源AI和计算引擎 众包取代新闻工作者 Google的DeepMind学会玩街机游戏 哑机器人V智能机器人 .NET与.NET 5融为一体 Google的深度学习-语音识别 LInQer将.NET LINQ移植到Javascript 机器人TED演讲-新的图灵测试? GAN的发明者加入苹果 您的智能手机会监视您键入的内容 人工智能帮助改善国际象棋 Zalando Flair NLP库已更新 TensorFlow 1.5包含移动版本 AlphaGo输了一场比赛-比分3-1 虚拟机器学习峰会 Microsoft开源AI调试工具 SharePoint走向移动 F#4.0发出文化变革的信号 克里斯蒂拍卖AI艺术品 人工智能如何区分 Facebook在蒙特利尔的新AI实验室 Mozilla想要您的声音 微软使用极深的神经网络赢得ImageNet 建立AI合作伙伴关系 .NET Core 3-Microsoft几乎回到了起点 神经网络-更好的销售商? Google使用AI查找您的住所 虹膜-适用于Android的Siri证明苹果没有优势 TensorFlow 2提供更快的模型训练 深度学习研究人员将为Google工作
您的位置:首页 >计算机基础 >

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后不会触发其点击事件

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。