首頁技術(shù)文章正文

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

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

好口碑IT培訓

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

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

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

1.visibility具有繼承性，其子元素也會繼承此屬性，若設(shè)置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ī)模尺寸、布局、顯示隱藏等，頁面重新構(gòu)建，此時就是回流。所有頁面第一次加載時需要產(chǎn)生一次回流)，而visibility切換是否顯示時則不會引起回流。

猜你喜歡：

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

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

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

CSS3如何設(shè)置顏色不透明度？

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

上一篇：css link和@import的區(qū)別是什么? 下一篇：position的屬性值有哪些？分別有哪些作用？