今天做畢設時遇到了一個小問題，我做了一個tab導航欄，點擊一個tab頁其它tab頁隱藏，這時候第一想法是使用display：none來控制顯示隱藏，寫了之后發現使用display會有一個問題，就是第二個tab頁的輪播圖是在頁面渲染時獲取第二個tab頁中某個元素的寬度來做自適應效果，因為已經隱藏，寬度為0，所以導致輪播圖的高度也為0，后來把display:none改為visibility：hidden就正常顯示和播放了。

display:none和visibility:hidden的區別是：

1.display:none是徹底消失，不在文檔流中占位，瀏覽器也不會解析該元素；visibility:hidden是視覺上消失了，可以理解為透明度為0的效果，在文檔流中占位，瀏覽器會解析該元素；

2.使用visibility:hidden比display:none性能上要好，display:none切換顯示時visibility，頁面產生回流（當頁面中的一部分元素需要改變規模尺寸、布局、顯示隱藏等，頁面重新構建，此時就是回流。所有頁面第一次加載時需要產生一次回流），而visibility切換是否顯示時則不會引起回流。

所以我使用visibility:hidden，在頁面渲染時第二個tab頁中的輪播圖就可以獲取寬度做自適應了。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的使用display：none和visibility：hidden隐藏的区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。