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

全國(guó)咨詢/投訴熱線：400-618-4000

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

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

好口碑IT培訓(xùn)

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

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

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

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

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

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

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



猜你喜歡：

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

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

JavaScript動(dòng)畫(huà)和CSS3動(dòng)畫(huà)有什么區(qū)別？

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

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

0 分享到：
和我們?cè)诰€交談！