CSS中的display与visibility
文章目录
- 一.display: none
- 二.visibility: hidden
- 三.opacity: 0
- 四.`display: none`与`visibility: hidden`的区别
- 五.元素隐藏方法总结：
一.display: none
- DOM 结构：浏览器不会渲染 display 属性为 none 的元素，不占据空间；
- 事件监听：无法进行 DOM 事件监听；
- 性能：动态改变此属性时会引起重排，性能较差；
- 继承：不会被子元素继承，毕竟子类也不会被渲染；
- transition：transition 不支持 display。
二.visibility: hidden
- DOM 结构：元素被隐藏，但是会被渲染不会消失，占据空间；
- 事件监听：无法进行 DOM 事件监听；
- 性 能：动态改变此属性时会引起重绘，性能较高；
- 继 承：会被子元素继承，子元素可以通过设置 visibility: visible; 来取消隐藏；
- transition：visibility 会立即显示，隐藏时会延时
三.opacity: 0
- DOM 结构：透明度为 100%，元素隐藏，占据空间；
- 事件监听：可以进行 DOM 事件监听；
- 性 能：提升为合成层，不会触发重绘，性能较高；
- 继 承：会被子元素继承,且，子元素并不能通过 opacity: 1 来取消隐藏；
- transition：opacity 可以延时显示和隐藏
四.display: none与visibility: hidden的区别
display: none的元素不占据任何空间，visibility: hidden的元素空间保留；display: none会影响css3的transition过渡效果，visibility: hidden不会；display: none隐藏产生重绘 ( repaint ) 和回流 ( relfow )，visibility: hidden只会触发重绘；- 株连性：
display: none的节点和子孙节点元素全都不可见，visibility: hidden的节点的子孙节点元素可以设置visibility: visible显示。visibility: hidden属性值具有继承性，所以子孙元素默认继承了hidden而隐藏，但是当子孙元素重置为visibility: visible就不会被隐藏。
五.元素隐藏方法总结：
- 如果希望元素不可见、不占据空间、资源会加载、DOM 可访问：
display: none； - 如果希望元素不可见、不能点击、但占据空间、资源会加载，可以使用：
visibility: hidden； - 如果希望元素不可见、可以点击、占据空间，可以使用：
opacity: 0； - 如果希望元素不可见、可以点击、不占据空间，可以使用：
opacity: 0; position: absolute;； - 如果希望元素不可见、不能点击、占据空间，可以使用：
position: relative; z-index: -1;； - 如果希望元素不可见、不能点击、不占据空间，可以使用：
position: absolute ; z-index: -1;；
CSS中的display与visibility相关推荐
- css中的display属性之li元素
li元素 li元素是一个块级元素,display值默认为 block 当我们把display值改为inline后,li元素以水平菜单的样式显示 补充:display与 visibility属性不同, ...
- HTML: css中的display属性
目录 display: none 未使用display: none前 使用display: none后 display: inline 未使用inline之前: 使用display: inline之后 ...
- 《三》CSS 中的 display 属性
display 属性可以设置元素的外部和内部显示类型.元素的外部显示类型将决定该元素在流式布局中的表现(块级或行内元素):元素的内部显示类型可以控制其子元素的布局(flex.grid 等). 块级元素 ...
- 详解CSS中的display属性
上周使用layer.tips('提示信息'.'#id'):含有id的元素设置display:none后,提示信息弹出框位置错位了,百度后找的以下原因: 应该是含有id的元素脱离文档流造成的. 参考:h ...
- css中的display属性值：table，table-row，table-cell
table:此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符. table-row:此元素会作为一个表格行显示(类似 <tr>). table-cell: ...
- css中实现显示和隐藏
CSS中的display和visibility 在平时的开发过程中,总是会遇到一些文字在特定的场景下显示或者隐藏来达到我们想要的效果,css中display和visibility语法,他们都 ...
- angularjs中ng-show与css中display:none的优先级问题
angular中ng-show 与 css的display:none 用过angular.js的童鞋都知道,ng-show指令在其条件符合时可以使元素显示,条件不符合时使元素隐藏. 我却在前两天写代码 ...
- 详解css3中display和visibility的区别
在css3中,display和visibility都具备对元素进行隐藏和显示的功能. display语法 display:none | block /*none表示隐藏 block表示显示*/ vis ...
- hide,hidden,display:none,visibility的区别
display是css中的样式,规定元素是否显示 style="display:none":不可见,不占用内存空间 visibility是css中的样式,规定元素是否可见 styl ...
最新文章
- 简述移动端IM开发的那些坑：架构设计、通信协议和客户端
- 谷歌大脑开源「数据增强」新招数：ImageNet准确率达85%，大神Quoc Le出品
- 智能合约从入门到精通：调用数据的布局和ABI
- eclipse运行时不自动保存的解决方法
- STM32下载库资料
- php源代码compress,Php常见开源程序gzip网页压缩功能手动关闭或开启方法大全
- HarmonyOS 2.0：正式开源，年底面向开发者发布智能手机 Beta 版本
- 徐州计算机专业技校,2021徐州所有的中专技校职高排名
- apple-system BlinkMacSystemFont Mac兼容字体库
- 3dmax界面由哪几部分组成
- 老毛桃PE工具去除捆绑软件的方法
- 熬夜总结的2022java面试题
- java 打砖块算法_打砖块java代码详细
- 戴尔win10新电脑装linux,如何给戴尔新机装系统win10
- ES2015 解构 Destructuring
- AcroFields设置PDF文本域
- ODrive AP调试记录
- Java的基本特性和优势
- 邮箱被盗，受到网络钓鱼攻击，如何甄别规避？
- 香港消防处去年接3.3万宗火警召唤 第四代调派系统料2033年启用