css怎麼隱藏div

藏色散人
發布: 2023-01-07 11:45:53
原創
4296 人瀏覽過

css隱藏div的方法:1、透過「display:none」實現隱藏div;2、透過「visibility:hidden」實現隱藏div;3、透過「opacity:0」實現隱藏div。

css怎麼隱藏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影片教學

以上是css怎麼隱藏div的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!