小編給大家分享一下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如何實現元素隱藏和顯示”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
