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影片教學）

以上是css實作元素隱藏和顯示的屬性有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！