教育行業(yè)A股IPO第一股（股票代碼 003032）

全國咨詢/投訴熱線：400-618-4000

Display：none與visibility：hidden有什么區(qū)別?

更新時間:2021年09月24日16時11分 來源:傳智教育 瀏覽次數(shù):

好口碑IT培訓

dispaly:none 設置該屬性后，該元素下的元素都會隱藏，占據(jù)的空間消失

visibility:hidden 設置該元素后，元素雖然不可見了，但是依然占據(jù)空間的位置區(qū)別

Display：none與visibility：hidden的區(qū)別

1.visibility具有繼承性，其子元素也會繼承此屬性，若設置visibility:visible，則子元素會顯示

2.visibility不會影響計數(shù)器的計算，雖然隱藏掉了，但是計數(shù)器依然繼續(xù)運行著。

3.在CSS3的transition中支持visibility屬性，但是不支持display，因為transition可以延遲執(zhí)行，因此配合visibility使用純CSS實現(xiàn)hover延時顯示效果可以提高用戶體驗

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



猜你喜歡：

怎么用css3畫三角形？css繪制三角形圖文教程

CSS3 box-shadow的用法|box-shadow屬性詳解

JavaScript動畫和CSS3動畫有什么區(qū)別？

CSS3如何設置顏色不透明度？

傳智教育HTML&JS+前端高手班

0 分享到：
和我們在線交談！