溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

css如何實現元素隱藏和顯示

發布時間:2021-04-17 11:41:49 來源:億速云 閱讀:293 作者:小新 欄目:web開發

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

實現屬性有:1、display屬性,值為“none”時隱藏元素,為“block”時顯示元素;2、visibility屬性,值為“hidden”時隱藏元素,為“visible”時顯示元素;3、overflow屬性;4、opacity屬性。

本教程操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

元素的顯示與隱藏

本質:讓一個元素在在頁面中隱藏或者顯示出來。

css可以實現元素隱藏和顯示的屬性

1:display屬性

  • display: none; 隱藏對象

  • display: block;除了轉換為塊級元素之外,還有顯示元素的意思

注意:display隱藏元素之后,不再占有原來的位置

2.visibility屬性

  • visibility: visible;  元素可視

  • visibility: hidden;   元素隱藏

注意:visibility隱藏元素后,繼續占有原來的位置

3.overflow屬性(溢出內容的顯示與隱藏)

overflow: visible | hidden | scroll | auto

1、屬性值具體說明見下表:

屬性值說明
visible不剪切內容,也不添加滾動條
hidden隱藏超出的部分
scroll不管內容是否超出,都顯示滾動條
auto只有內容超出時才顯示滾動條,不超出則不顯示

4、opacity屬性

  • opacity: 0; 隱藏元素

  • opacity: 1; 顯示元素

opacity屬性的意思是檢索或設置對象的不透明度。當他的透明度為0的時候,視覺上它是消失了;但是他依然占據著那個位置,并對網頁的布局起作用。

注:添加了opacity屬性的元素,它的背景和元素內容也是會跟著變化的。

看完了這篇文章,相信你對“css如何實現元素隱藏和顯示”有了一定的了解,如果想了解更多相關知識,歡迎關注億速云行業資訊頻道,感謝各位的閱讀!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

css
AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女