前端面試題-display:none和visibility:hidden的區別

1、display:none和visibility:hidden的區別

1.1 空間佔據

1.2 迴流和渲染

1.3 株連性

2、空間佔據

display:none 隱藏後的元素 不佔據任何空間，而 visibility:hidden 隱藏的元素 空間依舊存在。

3、迴流和渲染

display:none 隱藏產生迴流和重繪（reflow 和 repaint），而 visibility:hidden 只產生重繪。

3、株連性

display:none 就是「株連性」明顯的聲明：一旦父節點元素應用了 display:none，父節點及其子孫節點元素所有不可見，並且不管其子孫元素如何不屈地掙扎都無濟於事。

4、隱藏失效

若子孫元素應用了 visibility:visible，則這個子孫元素不但不會隱藏，並且會顯現出來。

Code

Example

閱讀更多