分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

CSS:opacity:0,visibility:hidden,display:none的区别

发布时间:2023-09-06 01:17责任编辑:蔡小小关键词:CSS

CSS中opacity=0,visibility=hidden,display=none的时候,三者有什么区别呢??

参考了stackoverflow的博客,才发现区别如下所示:

Here is a compilation of verified information from the various answers.

Each of these CSS properties is in fact unique. In addition to rendering an element not visible, they have the following additional effect(s):

  1. Collapses the space that the element would normally occupy
  2. Responds to events (e.g., click, keypress)
  3. Participates in the taborder
 ????????????????????collapse events taborderopacity: 0 ?????????????No ????Yes ????Yesvisibility: hidden ?????No ????No ?????Novisibility: collapse ???* ?????No ?????Nodisplay: none ?????????Yes ????No ?????No* Yes inside a table element, otherwise No.

---objects with Visibility:hidden still have shape, they just arent visible. opacity zero elements can still be clicked and react to other events.

小结如下:
1 opacity=0,该元素隐藏起来了,但不会改变页面布局,并且,如果该元素已经绑定一些事件,如click事件,那么点击该区域,也能触发点击事件的
2 visibility=hidden,该元素隐藏起来了,但不会改变页面布局,但是不会触发该元素已经绑定的事件
3 display=none,把元素隐藏起来,并且会改变页面布局,可以理解成在页面中把该元素删除掉一样

参考:
http://www.cnblogs.com/simonbaker/p/3570844.html
http://stackoverflow.com/questions/272360/does-opacity0-have-exactly-the-same-effect-as-visibilityhidden

CSS:opacity:0,visibility:hidden,display:none的区别

原文地址:http://www.cnblogs.com/golddemon/p/7659115.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved