1. display:none和visibility:hidden的区别?
方式 | display:none | visibility:hidden |
---|---|---|
共同点 | 能让元素消失 | 能让元素消失 |
区别 | 会让元素完全从渲染树中消失,不占据任何空间 | 元素依旧在渲染树上,只是不显示,占据渲染树空间 |
非继承属性,子孙节点消失。 由于节点从渲染树上消失,所以无法通过子孙节点显示。 | 继承属性, 子孙节点由于继承消失,但是可以通过visibility:visible让子孙节点显示。 | |
可能会导致文档重排 | 可能会导致文档重绘。 |
方式 | display:none | visibility:hidden |
---|---|---|
共同点 | 能让元素消失 | 能让元素消失 |
区别 | 会让元素完全从渲染树中消失,不占据任何空间 | 元素依旧在渲染树上,只是不显示,占据渲染树空间 |
非继承属性,子孙节点消失。 由于节点从渲染树上消失,所以无法通过子孙节点显示。 | 继承属性, 子孙节点由于继承消失,但是可以通过visibility:visible让子孙节点显示。 | |
可能会导致文档重排 | 可能会导致文档重绘。 |