CSS隐藏页面上元素的三种方法 opacity display visibility 优劣使用场景

display:none

结构 : 会让元素完全从渲染树中消失 渲染的时候不占据任何空间 不能点击

继承 : 是非继承属性 子孙节点消失由于元素从渲染树消失造成 改子孙节点属性无法显示

性能 : 修改元素会造成文档回流 读屏器不会读取display:none元素内容 性能消耗较大

场景 : 显示出原来这里不存在的结构

transition : 不支持display

举例 : 从这个世界消失来 不存在了

visibility:hidden

结构 : 不会让元素从渲染树消失 渲染元素继续占据空间 只是内容不可见 不能点击

继承 : 是继承属性 子孙节点消失由于继承了 hidden 通过设置 visible可以让子孙节点显示

性能 : 修改元素只会造成成本元素的重绘 性能消耗较少 读屏器读取visibility:hidden 元素内容

场景 : 显示不会导致页面结构发生变动 不会撑开

transition : 支持visibility 会立即显示 隐藏时会延时

举例 : 视觉和物理上都隐身了 看不见 摸不到 但是存在

opacity:0

结构 : 不会让元素从渲染树消失 渲染元素继续占据空间 只是内容不可见 可以点击

继承 : 会被子元素继承 且子元素并不能通过 opacity 来取消隐藏

性能 : 提升为合成层 不会触发重绘 性能消耗较少

场景 : 可以跟transition搭配 自定义图片上传按钮

transition : 支持opacity 可以延时显示和隐藏

举例 : 视觉上隐身了 看不见 但可以触摸到