CSS隱藏元素

2021-09-29 19:32:50 字數 1792 閱讀 3396

一說到隱藏元素,很多人會想到display:none;,其實除了它還有很多隱藏元素的方法,它們都有各自特點和屬性,今天就來介紹以下兩種

一:display

在將display之前我們來看看元素的分類

分類一:塊級元素 特點:獨佔一行,對寬高生效,如果不給寬度撐滿整行,如果不給高度隨著內容的增長而增長。

分類二:行內元素 特點:可以多個標籤存在一行,對寬高不生效完全依靠內容去撐起寬高。

分類三:行內塊元素 特點: 結合了行內和塊級元素的特點,不僅是可以設定寬高而且還可以多個標籤存在一行。

在你寫**的時候肯定遇到過這樣的情況,你寫了乙個div盒子然後你想在它的後面再寫乙個,你會發現,你寫的第二個盒子並不會接在後面,而是跟在他的下面,這是因為div是乙個會級元素,它會獨佔一行,那怎麼辦呢,這時候display就可以體現它的作用了,它會根據你的需要對元素進行強轉。

display:inline; 轉成行內元素

display:block; 轉成 塊級元素時

display:inline-block; 轉成行內塊元素

我們除了可用它來強轉,我們還可以用他的display:none;來隱藏元素

實操效果如下:

在我們沒給display之前我們看到這樣的效果

在我們給display之後:

再給display之後可以發現紅色色塊消失了,並且綠色色塊向上縮排

二:visibility

首先來看一下他有哪些屬性值

visibility:visible; 預設可見的

visibility:cllapse;:使用在**元素上 刪除一行和一列的時候不影響**的整體布局

最後就是他的隱藏屬性visibility:hidden;

我們通過**來看下他的效果是什麼樣的,同樣的在美給visibility之前,三個色塊從上往下排列

再給visibility之後效果如下

我們可以發現紅色色塊不見了,但是綠色色塊並沒有向上縮排

通過上面的實踐我們可以總結出diplay和 visibility 區別。

1再給.display:none;之後,元素不會占有之前的位置 脫離了文件流,所以後面的元素就可以占有它以前的位置。

2.visibility:hidden;占有之前的位置,不脫離文件流導致空間依然存在,雖然他被隱藏了,但是他還在那個位置佔著,後面的元素就不可以占有它的位置。

其實overflow也有隱藏效果,只不過他隱藏的是超出元素本身溢位的部分

首先寫了100px*100px的div,然後往裡面填充了很多文字,效果如下

可以看到,超出的部分和div的寬同寬,一直往下延伸

給overflow後效果

我們可以看到,overflow:hidden;只是把內容溢位的部分隱藏了,而不是把整個內容,元素給隱藏。

CSS隱藏元素

在製作網頁時,隱藏內容也是一種比較常用的手法,它的作用一般有 隱藏文字 隱藏鏈結 隱藏超出範圍的內容 隱藏彈出層 隱藏滾動條 清除錯位和浮動等等。使用css即可使以上提到的內容隱藏起來,幾種隱藏內容的方法 1 使用display none來隱藏所有內容 display none可以讓網頁中所有內容不...

css元素隱藏

這個方式會把空間都釋放了,在控制台也不顯示了,所以綁在元素上的事件也都沒有了。不能修改子孫節點的dispaly值顯示出來。2.opacity 0 這個方式只是把元素的透明度設定為0,也就是把它變得透明,它本身還是在的只是看不到了,所以空間就不會釋放,綁在上面的事件也都在,能正常使用。3.visili...

CSS隱藏元素

opacity opacity是設定乙個元素的透明度,這一設定為0只能從視覺上隱藏元素,而元素本身依然佔據它自己的位置並對網頁的布局起作用,它也將響應使用者互動。visibility 該屬性值為hidden的時候,元素將會隱藏,也會佔據著自己的位置,並對網頁的布局起作用,與 opacity 唯一不同...