實現(xiàn)屬性有:1、display屬性,值為“none”時隱藏元素,為“block”時顯示元素;2、visibility屬性,值為“hidden”時隱藏元素,為“visible”時顯示元素;3、overflow屬性;4、opacity屬性。
本教程操作環(huán)境:windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
元素的顯示與隱藏
本質(zhì):讓一個元素在在頁面中隱藏或者顯示出來。
css可以實現(xiàn)元素隱藏和顯示的屬性
1:display屬性
-
display: none;
隱藏對象 -
display: block;
除了轉(zhuǎn)換為塊級元素之外,還有顯示元素的意思
注意:display隱藏元素之后,不再占有原來的位置
2.visibility屬性
-
visibility: visible;
元素可視 -
visibility: hidden;
元素隱藏
注意:visibility隱藏元素后,繼續(xù)占有原來的位置
3.overflow屬性(溢出內(nèi)容的顯示與隱藏)
overflow: visible | hidden | scroll | auto
1、屬性值具體說明見下表:
屬性值 | 說明 |
---|---|
visible | 不剪切內(nèi)容,也不添加滾動條 |
hidden | 隱藏超出的部分 |
scroll | 不管內(nèi)容是否超出,都顯示滾動條 |
auto | 只有內(nèi)容超出時才顯示滾動條,不超出則不顯示 |
4、opacity屬性
-
opacity: 0;
隱藏元素 -
opacity: 1;
顯示元素
opacity屬性的意思是檢索或設(shè)置對象的不透明度。當(dāng)他的透明度為0的時候,視覺上它是消失了;但是他依然占據(jù)著那個位置,并對網(wǎng)頁的布局起作用。
注:添加了opacity屬性的元素,它的背景和元素內(nèi)容也是會跟著變化的。
(學(xué)習(xí)視頻分享:css視頻教程)