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

css3

浏览数:1,071

2018-3-29

一、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

阅读更多

原文地址:https://segmentfault.com/a/1190000013929168