CSS高階技巧 網頁元素的隱藏與顯示

2021-10-10 07:12:33 字數 593 閱讀 3691

實際開發場景:

配合後面js做特效,比如下拉列表,原先沒有,滑鼠經過,顯示下拉列表, 應用極為廣泛

屬性值

描述visible不剪下內容也不新增滾動條

hidden不顯示超過物件尺寸的內容,超出的部分隱藏掉

scroll不管超出內容否,總是顯示滾動條

auto超出自動顯示滾動條,不超出不顯示滾動條

實際開發場景:

清除浮動

隱藏超出內容,隱藏掉, 不允許內容超過父盒子。

屬性區別

用途display隱藏物件,不保留位置

配合後面js做特效,比如下拉列表,原先沒有,滑鼠經過,顯示下拉列表, 應用極為廣泛

visibility隱藏物件,保留位置

使用較少

overflow只是隱藏超出大小的部分

1. 可以清除浮動 2. 保證盒子裡面的內容不會超出該盒子範圍

CSS元素的顯示與隱藏

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

CSS高階技巧(2)溢位的文字隱藏

normal 預設 break all 允許單詞內執行 keep all 只能在半形空格或連字元處換行 normal 預設 nowrap 強制在同一行內顯示所有文字,知道文字結束或者遭遇br標籤才換行 text overflow clip ellipsis clip 不顯示省略標記 直接隱藏 ell...

CSS之元素顯示與隱藏

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