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

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

怎樣讓一個(gè)元素在頁(yè)面中隱藏或顯示出來(lái)?

更新時(shí)間:2022年01月07日12時(shí)02分 來(lái)源:傳智教育 瀏覽次數(shù):

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

  display 顯示隱藏

  visibility 顯示隱藏

  overflow 溢出顯示隱藏

display 屬性

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

  display: none ;隱藏對(duì)象

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

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

visibility 可見(jiàn)性

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

  visibility:visible ; 元素可視

  visibility:hidden; 元素隱藏

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

overflow 溢出

一般情況下,我們都不想讓溢出的內(nèi)容顯示出來(lái),因?yàn)橐绯龅牟糠謺?huì)影響布局。

但是如果有定位的盒子,請(qǐng)慎用overflow:hidden因?yàn)樗鼤?huì)隱藏多余的部分。

注意:

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

visibility 顯示隱藏元素但是保留原來(lái)的位置

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




猜你喜歡:

JS數(shù)組如何添加或刪除數(shù)組元素?

塊級(jí)元素、行內(nèi)元素和行內(nèi)塊元素各自特點(diǎn)和區(qū)別

H5 nav元素的作用?nav元素一般用于哪些場(chǎng)合?

六大H5常用結(jié)構(gòu)元素【前端技術(shù)文章】

傳智教育HTML前端與移動(dòng)開(kāi)發(fā)培訓(xùn)

0 分享到:
和我們?cè)诰€交談!