文章目录
一.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;
;