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

MasonEast 發布于2019-08-01 18:44 / 2222人閱讀

摘要：一和的區別空間占據回流和渲染株連性二空間占據隱藏后的元素不占據任何空間，而隱藏的元素空間依舊存在。三株連性就是株連性明顯的聲明一旦父節點元素應用了，父節點及其子孫節點元素全部不可見，而且無論其子孫元素如何不屈地掙扎都無濟于事。

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

云服務器 GPU云服務器棧和隊列面試題 web前端和前端的區別后端和前端的區別 web前端和ui的區別

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52074.html

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

摘要：一和的區別空間占據回流和渲染株連性二空間占據隱藏后的元素不占據任何空間，而隱藏的元素空間依舊存在。三株連性就是株連性明顯的聲明一旦父節點元素應用了，父節點及其子孫節點元素全部不可見，而且無論其子孫元素如何不屈地掙扎都無濟于事。一、display:none和visibility:hidden的區別 1.1 空間占據 1.2 回流和渲染 1.3 株連性二、空間占據 display:no...

entner 2019-08-30 14:14 評論0 收藏0
[面試專題]一線互聯網大廠面試總結

摘要：道阻且長啊前端面試總結前端面試筆試面試騰訊一面瀏覽器工作原理瀏覽器的主要組件包括用戶界面包括地址欄后退前進按鈕書簽目錄瀏覽器引擎用來查詢及操作渲染引擎的接口渲染引擎渲染界面和是基于兩種渲染引擎構建的，使用自主研發的渲染引擎，和都使用網絡用來道阻且長啊TAT(前端面試總結) 前端面試筆試面試騰訊一面 1.瀏覽器工作原理瀏覽器的主要組件包括：用戶界面－包括地址欄、后退/前...

lemanli 2019-08-02 15:57 評論0 收藏0
[面試專題]一線互聯網大廠面試總結

摘要：道阻且長啊前端面試總結前端面試筆試面試騰訊一面瀏覽器工作原理瀏覽器的主要組件包括用戶界面包括地址欄后退前進按鈕書簽目錄瀏覽器引擎用來查詢及操作渲染引擎的接口渲染引擎渲染界面和是基于兩種渲染引擎構建的，使用自主研發的渲染引擎，和都使用網絡用來道阻且長啊TAT(前端面試總結) 前端面試筆試面試騰訊一面 1.瀏覽器工作原理瀏覽器的主要組件包括：用戶界面－包括地址欄、后退/前...

xfee 2019-08-21 11:53 評論0 收藏0
[面試專題]一線互聯網大廠面試總結

摘要：道阻且長啊前端面試總結前端面試筆試面試騰訊一面瀏覽器工作原理瀏覽器的主要組件包括用戶界面包括地址欄后退前進按鈕書簽目錄瀏覽器引擎用來查詢及操作渲染引擎的接口渲染引擎渲染界面和是基于兩種渲染引擎構建的，使用自主研發的渲染引擎，和都使用網絡用來道阻且長啊TAT(前端面試總結) 前端面試筆試面試騰訊一面 1.瀏覽器工作原理瀏覽器的主要組件包括：用戶界面－包括地址欄、后退/前...

leap_frog 2019-08-29 13:08 評論0 收藏0