溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

css如何實(shí)現(xiàn)元素隱藏和顯示

發(fā)布時(shí)間：2021-04-17 11:41:49 來(lái)源：億速云 閱讀：258 作者：小新 欄目：web開(kāi)發(fā)

小編給大家分享一下css如何實(shí)現(xiàn)元素隱藏和顯示，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

實(shí)現(xiàn)屬性有：1、display屬性，值為“none”時(shí)隱藏元素，為“block”時(shí)顯示元素；2、visibility屬性，值為“hidden”時(shí)隱藏元素，為“visible”時(shí)顯示元素；3、overflow屬性；4、opacity屬性。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

元素的顯示與隱藏

本質(zhì)：讓一個(gè)元素在在頁(yè)面中隱藏或者顯示出來(lái)。

css可以實(shí)現(xiàn)元素隱藏和顯示的屬性

1：display屬性

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

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

注意：display隱藏元素之后，不再占有原來(lái)的位置

2.visibility屬性

  • visibility: visible;  元素可視

  • visibility: hidden;   元素隱藏

注意：visibility隱藏元素后，繼續(xù)占有原來(lái)的位置

3.overflow屬性（溢出內(nèi)容的顯示與隱藏）

overflow: visible | hidden | scroll | auto

1、屬性值具體說(shuō)明見(jiàn)下表：

屬性值說(shuō)明
visible不剪切內(nèi)容，也不添加滾動(dòng)條
hidden隱藏超出的部分
scroll不管內(nèi)容是否超出，都顯示滾動(dòng)條
auto只有內(nèi)容超出時(shí)才顯示滾動(dòng)條，不超出則不顯示

4、opacity屬性

  • opacity: 0; 隱藏元素

  • opacity: 1; 顯示元素

opacity屬性的意思是檢索或設(shè)置對(duì)象的不透明度。當(dāng)他的透明度為0的時(shí)候，視覺(jué)上它是消失了；但是他依然占據(jù)著那個(gè)位置，并對(duì)網(wǎng)頁(yè)的布局起作用。

注：添加了opacity屬性的元素，它的背景和元素內(nèi)容也是會(huì)跟著變化的。

看完了這篇文章，相信你對(duì)“css如何實(shí)現(xiàn)元素隱藏和顯示”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手