CSS元素的顯示與隱藏

2022-08-10 01:15:12 字數 1243 閱讀 4363

我們訪問某些**的時候,經常可以看到一些廣告彈出來,點選關閉就不見了,但是重新重新整理頁面後,廣告又會重新彈出來。這就是元素的顯示和隱藏的乙個應用。

display屬性用於設定乙個元素應如何顯示。

display隱藏元素後,不再占有原來的位置。

visibility屬性用於指定乙個元素應可見還是隱藏。

visibility隱藏元素後,繼續占有原來的位置。

如果隱藏元素想要原來的位置,就用visibility: hidden

如果隱藏元素不想要原來的位置,就用display: none

overflow屬性指定了如果內容溢位乙個元素的框(超過其指定高度和寬度)時,會發生什麼。

屬性值描述

visible

不剪下內容也不新增滾動條

hidden

超出的部分隱藏

scroll

不管有沒有超出,總是顯示滾動條

auto

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

一般情況下,我們都不想讓溢位的內容顯示出來,因為溢位的部分會影響布局。但是如果有定位的盒子,請慎用overflow: hidden,因為它會隱藏多餘的部分。

單行文字溢位顯示省略號必須滿足三個條件:

先強制一行內顯示文字

white-space: nowrap;/*預設值normal,自動換行*/

超出的部分隱藏

overflow: hidden;

文字用省略號替代超出的部分

text-overflow: ellipsis;

多行文字溢位顯示省略號,有較大相容性問題,適合於webkit瀏覽器或移動端,移動端大部分是webkit核心。

overflow: hidden;

text-overflow: ellipsis;

/*彈性伸縮盒子模型顯示*/

display: -webkit-box;

/*限制在乙個塊元素顯示的文字的行數*/

-webkit-line-clamp: 2;

/*設定或檢索伸縮盒子物件的子元素的排列方式*/

-webkit-box-orient: vertical;

CSS之元素顯示與隱藏

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

元素的顯示與隱藏

display none 隱藏物件.display block 除了轉換層塊級元素,同時還有顯示元素的意思.特點 隱藏後不再保留位置,多用於下拉列表.visibility visible 物件可視 visibility hidden 物件隱藏 特點 隱藏後保留位置 停薪留職 屬性值 描述visibl...

元素的顯示與隱藏

配合後面js做特效,比如下拉列表,原先沒有,滑鼠經過,顯示下拉列表,應用極為廣泛 描述visible不剪下內容也不新增滾動條 hidden不顯示超過物件尺寸的內容,超出的部分隱藏掉 scroll不管超出內容否,總是顯示滾動條 auto超出自動顯示滾動條,不超出不顯示滾動條 清除浮動 隱藏超出內容,隱...