CSS 小結筆記之元素的隱藏與顯示

2021-09-28 05:21:48 字數 1595 閱讀 1069

在**上經常會有一些需要一定操作才會顯示或隱藏的元素,這時會用到元素的隱藏與顯示。主要通過以下三種屬性實現。

1、display :none|block |inline |inline-block

display常用以上四個屬性值,none 是元素隱藏,且不占有位置。block  除了轉換為塊級元素之外,同時還有顯示元素的意思。inline 和inline-block 分別是顯示為行內元素和行內塊元素。

可以發現紅色的div 消失且不占有位置,粉色的自動補上去。

2、visibility: hidden|visible

visibility 隱藏時原有的位置還會占有,不會消失

將1中的display:none ; 改為 visibility: none;結果如下圖所示

可以發現紅色額的div 雖然消失了,但是原有的位置還是占有的。

3、overflow: visible | auto | hidden | scroll

overflow只要是用來對超出盒子指定大小的內容做處理。

visible 是預設值,及不剪下內容也不新增滾動條。

auto 是有超出部分就新增滾動條,沒有超出的部分就不新增滾動條。

hidden 是超出的部分被剪下,不顯示。

scroll 是不管內容有沒有超出大小,都新增滾動條。

更多專業前端知識,請上

【猿2048】www.mk2048.com

CSS之元素顯示與隱藏

溢位的文字隱藏 在css中有三個顯示和隱藏的單詞比較常見,他們分別是 display visibility 和 overflow。display 設定或檢索物件是否及如何顯示。display none 隱藏物件 與它相反的是 display block 除了轉換為塊級元素之外,同時還有顯示元素的意思...

CSS元素的顯示與隱藏

我們訪問某些 的時候,經常可以看到一些廣告彈出來,點選關閉就不見了,但是重新重新整理頁面後,廣告又會重新彈出來。這就是元素的顯示和隱藏的乙個應用。display屬性用於設定乙個元素應如何顯示。display隱藏元素後,不再占有原來的位置。visibility屬性用於指定乙個元素應可見還是隱藏。vis...

CSS 元素的顯示與隱藏 隨學筆記

元素的顯示與隱藏 類似 廣告,當我們點選就不見了,但是重新重新整理頁面,會重新出現。本質 讓乙個元素在頁面中隱藏或者顯示出來。常用的三種方法 display visibility overflow 1.display屬性 display屬性用於設定乙個元素如何顯示 引數 none 隱藏物件 bloc...