您好,登錄后才能下訂單哦!
本篇內容主要講解“css如何隱藏div”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學習“css如何隱藏div”吧!
css隱藏div的方法:1、通過“display:none”實現隱藏div;2、通過“visibility:hidden”實現隱藏div;3、通過“opacity:0”實現隱藏div。
本文操作環境:windows7系統、HTML5&&CSS3版,DELL G3電腦
css怎么隱藏div?
三種CSS中隱藏Div的方法
CSS中display和visibility屬性可以隱藏和顯示html元素包括div層
一:
display:none|block display:none
隱藏該文件html,確切的說是在瀏覽器中清楚該元素,不占屏幕空間,若其下有其他元素就會移到該空間區域
display:block
顯示已經隱藏的html元素
如果別的元素占有了該空間時,它將下移,
空間重新被原來的元素占用
二:
visibility:hidden|visible visibility:hidden
隱藏該元素,真正的隱藏,但他還占用那塊空間
visibility:visible
讓元素顯示
當一個元素的 visibility 屬性被設置成 collapse值后,對于一般的元素,它的表現跟hidden 是一樣的。
1.chrome 中,使用 collapse 值和使用 hidden 沒有區別。
2.firefox,opera 和 IE,使用 collapse 值和使用 display:none 沒有什么區別。
三:
opacity:0
opacity屬性我相信大家都知道表示元素的透明度,而將元素的透明度設置為 0 后,在我們用戶眼中,元素也是隱藏的,這算是一種隱藏元素的方法。 這種方法和 visibility:hidden 的一個共同點是元素隱藏后依舊占據著空間,但我們都知道,設置透明度為 0 后,元素只是隱身了,它依舊存在頁面中。
所以display和visibility控制的分別是html元素是否存在和是否顯示
display的屬性定義該元素存在或不存在
而visibility的屬性只是控制該元素是否顯示出來實際上還是存在的
opacity元素是隱藏的,但它它依舊存在頁面中
到此,相信大家對“css如何隱藏div”有了更深的了解,不妨來實際操作一番吧!這里是億速云網站,更多相關內容可以進入相關頻道進行查詢,關注我們,繼續學習!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。