1. 程式人生 > >display和visibility的區別

display和visibility的區別

做前端快一年了,竟然對css的visibility一點印象都沒有,今天總結一下兩者的區別:

 

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

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

 

除去對效能的考慮,二者的區別就是一個在文件流中佔位置,一個不會佔