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

CSS怎樣控制元素的顯示與隱藏?

更新時間:2022-01-11 來源:黑馬程序員 瀏覽量:

瀏覽網(wǎng)頁時,常常會有網(wǎng)站廣告,當(dāng)我們點擊關(guān)閉就不見了,但是我們重新刷新頁面,會重新出現(xiàn)。這種效果本質(zhì)上是讓一個元素在頁面中隱藏或者顯示出來。

  display 顯示隱藏

  visibility 顯示隱藏

  overflow 溢出顯示隱藏

display 屬性

display 屬性用于設(shè)置一個元素應(yīng)如何顯示。

  display: none ;隱藏對象

  display:block ;除了轉(zhuǎn)換為塊級元素之外,同時還有顯示元素的意思

display 隱藏元素后,不再占有原來的位置。 后面應(yīng)用及其廣泛,搭配JS 可以做很多的網(wǎng)頁特效。

visibility 可見性

visibility屬性用于指定一個元素應(yīng)可見還是隱藏。

  visibility:visible ; 元素可視

  visibility:hidden; 元素隱藏

visibility 隱藏元素后,繼續(xù)占有原來的位置。 如果隱藏元素想要原來位置,就用visibility:hidden 如果隱藏元素不想要原來位置,就用display:none (用處更多重點)

overflow 溢出

一般情況下,我們都不想讓溢出的內(nèi)容顯示出來,因為溢出的部分會影響布局。

但是如果有定位的盒子,請慎用overflow:hidden因為它會隱藏多余的部分。

注意:

display 顯示隱藏元素但是不保留位置

visibility 顯示隱藏元素但是保留原來的位置

overflow 溢出顯示隱藏但是只是對于溢出的部分處理



猜你喜歡:

如何使用ref實現(xiàn)頁面上的元素和內(nèi)容的引用?

jQuery元素內(nèi)容操作的方法有多少種?

什么是塊元素?什么是行內(nèi)元素?

JavaScript中修改元素內(nèi)容怎樣操作?

黑馬程序員HTML&前端與移動開發(fā)高手班課程

分享到:
在線咨詢 我要報名
和我們在線交談!