今天做畢設時遇到了一個小問題，我做了一個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有什麼差別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
