display、opacity、visibility的区别？
共同点
都让元素不可见
二者区别
隐藏后是否占据原有空间
display：none ，不占据空间，页面重新渲染
visibility：hidden 占据空间，不能触发点击事件
opacity：0 ，占据空间，仍可触发点击事件性能
display：none 引起页面回流与重绘，性能消耗大
visibility：hidden 只造成本元素的重绘，性能消耗较少
opacity：0 只造成本元素重绘，性能消耗较少这一点的区别是由于是否隐藏后是否占据原有空间的区别而引起的
继承
display：none和opacity：0 非继承属性，修改子孙节点属也无法显示visibility：hidden 是继承属性，子孙节点由于继承了visibility：hidden才不显示，通过设置子节点visibility：visible就可以让子孙节点显示出来。
css3动画transition支持性
transition不支持display属性
transition动画支持opacity或者visibility属性
参考链接：https://www.cnblogs.com/wannananana/p/12460712.html
display、opacity、visibility的区别？相关推荐
- display和visibility的区别
display和visibility的区别,在控件中使用: display:none 隐藏后 不会占位置 下面的元素会跳上来 而visibility:hidden隐藏后 它还是会将这个位置占着 下面的 ...
- 详解css3中display和visibility的区别
在css3中,display和visibility都具备对元素进行隐藏和显示的功能. display语法 display:none | block /*none表示隐藏 block表示显示*/ vis ...
- 基础总结（04）-- display:none;visibility:hidden;区别
display:none 1.使元素隐藏,不再占据空间. 2.动态操作时会引起页面回流和重绘,影响性能. 3.子元素也会被隐藏并且添加display:block/visibility:visible无 ...
- hide,hidden,display:none,visibility的区别
display是css中的样式,规定元素是否显示 style="display:none":不可见,不占用内存空间 visibility是css中的样式,规定元素是否可见 styl ...
- html隐藏visibility,通过display或visibility来隐藏html元素
有些时候我们需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏,可以通过display或visibility来实现.通过下面的例子了解display和visibility的区别,简单的例子代 ...
- CSS隐藏元素的几种方式以及display、visibility、opacity的区别
CSS隐藏元素的方式 首先最通用且最易想到的方法肯定是display.visibility和opacity这三种了 display:none 设置元素不可见并且连盒模型也不生成,一般用于不占空间的隐藏 ...
- display、visibility、opacity的区别
我们常设置display:none.visibility:hidden.opacity:0来隐藏元素,但是在实际使用中会有问题 (1)元素隐藏时是否在DOM中存在? display:不占据空间,会导致 ...
- css元素隐藏不可获取,Css隐藏元素(display,visibility)的区别
Css隐藏元素(display,visibility)的区别 display display属性值 display 属性规定元素应该生成的框的类型. 属性值: block: /表现为一个块级元素(一般 ...
- display、visibility和opactity的区别
1.display:none: DOM结构:浏览器不会渲染display属性为none的元素,不占据空间,意思就是页面上没有它的一席之地,你在开发者模式中选不中那个元素. 事件监听:无法进行DOM事件 ...
- CSS Display与Visibility区别和用法
CSS Display与Visibility区别和用法 CSS属性display和visibility容易混淆,visibility和display两个属性都有隐藏元素的功能.visibility属性 ...
最新文章
- java双等比较值_java – 执行双值相等比较时,应该是epsilon值
- 空指针错误 java.lang.NullPointerException 浅谈
- ElasticStack系列之十六 ElasticSearch5.x index/create 和 update 源码分析
- HD 1159 Common Subsequence （最长公共子序列）
- 第一讲，Python的安装（干货）
- Attention的梳理、随想与尝试
- Yet Another Counting Problem CodeForces - 1342C(规律+前缀和)
- 优秀！港大同济伯克利提出Sparse R-CNN: 目标检测新范式
- 黑鲨游戏手机二代再曝新特性 “操控之王”带来全新体验
- 瑞典抢发区块链数字货币 E-Krona！
- python电脑下载-PC端数据下载软件开发（Python）
- java qq空间权限控制_QQ空间访问权限设置方法
- 浏览器可下载的网页链接(百度云链接等)，而迅雷(等外置软件)下载失败
- 藏在成都这个阴雨小城里的互联网公司
- NetSuite 巧做打印模板
- serverlet增删改查项目代码
- 【程序人生】我的程序人生，与互联网13年的际遇
- python和工程造价_不会Python的将慢慢被淘汰！
- 广西国家级自然保护区功能区划图（展示）
- 搜狗输入法怎么打印间隔号