css隱藏div的方法:1、通過“display:none”實(shí)現(xiàn)隱藏div;2、通過“visibility:hidden”實(shí)現(xiàn)隱藏div;3、通過“opacity:0”實(shí)現(xiàn)隱藏div。
本文操作環(huán)境:windows7系統(tǒng)、HTML5&&CSS3版,DELL G3電腦
css怎么隱藏div?
三種CSS中隱藏Div的方法
CSS中display和visibility屬性可以隱藏和顯示html元素包括div層
一:
display:none|block display:none
隱藏該文件html,確切的說是在瀏覽器中清楚該元素,不占屏幕空間,若其下有其他元素就會(huì)移到該空間區(qū)域
display:block
顯示已經(jīng)隱藏的html元素
如果別的元素占有了該空間時(shí),它將下移,
空間重新被原來的元素占用
二:
visibility:hidden|visible visibility:hidden
隱藏該元素,真正的隱藏,但他還占用那塊空間
visibility:visible
讓元素顯示
當(dāng)一個(gè)元素的 visibility 屬性被設(shè)置成 collapse值后,對(duì)于一般的元素,它的表現(xiàn)跟hidden 是一樣的。
1.chrome 中,使用 collapse 值和使用 hidden 沒有區(qū)別。
2.firefox,opera 和 IE,使用 collapse 值和使用 display:none 沒有什么區(qū)別。
三:
opacity:0
opacity屬性我相信大家都知道表示元素的透明度,而將元素的透明度設(shè)置為 0 后,在我們用戶眼中,元素也是隱藏的,這算是一種隱藏元素的方法。 這種方法和 visibility:hidden 的一個(gè)共同點(diǎn)是元素隱藏后依舊占據(jù)著空間,但我們都知道,設(shè)置透明度為 0 后,元素只是隱身了,它依舊存在頁面中。
所以display和visibility控制的分別是html元素是否存在和是否顯示
display的屬性定義該元素存在或不存在
而visibility的屬性只是控制該元素是否顯示出來實(shí)際上還是存在的
opacity元素是隱藏的,但它它依舊存在頁面中
【推薦學(xué)習(xí):css視頻教程】