前端面试题-display:none和visibility:hidden的区别

WEBING

一、display:none和visibility:hidden的区别

1.1 空间占据

1.2 回流和渲染

1.3 株连性

二、空间占据

display:none 隐藏后的元素不占据任何空间,而 visibility:hidden 隐藏的元素空间依旧存在

三、回流和渲染

display:none 隐藏产生回流和重绘(reflow 和 repaint),而 visibility:hidden 只产生重绘。

三、株连性

display:none 就是“株连性”明显的声明:一旦父节点元素应用了 display:none,父节点及其子孙节点元素全部不可见,而且无论其子孙元素如何不屈地挣扎都无济于事。

四、隐藏失效

若子孙元素应用了 visibility:visible,则这个子孙元素不但不会隐藏,而且会显现出来。

Code

隐藏失效

Example

隐藏失效

阅读更多

阅读 9.6k

GitHub [链接]

3.6k 声望
6k 粉丝
0 条评论

GitHub [链接]

3.6k 声望
6k 粉丝
文章目录
宣传栏