css隱藏元素的幾種方法

2022-07-20 17:45:10 字數 1596 閱讀 2734

在css中,要隱藏dom元素常見的幾種方法:

1.opacity值為0

2.visibility值為hidden

3.display值為none

4.position值為absolute,並且將其移到不可見區域

5.(在新的css中使用clip-path來替代clip,不常用知道就行了

該屬性很少見,該屬性是通過裁剪的方法實現隱藏的。被隱藏的內容依然佔據著那個位置,它周圍的元素的行為就如同它可見時一樣。

記住使用者互動例如滑鼠懸停或者點選在剪裁區域之外也不可能生效。此外,這個屬性能夠使用各種過渡動畫來實現不同的效果。

注意:clip-path之所以沒有很普及,是因為其瀏覽器相容問題。在ie中是完全不支援的,所以,建議用的時候一定要加上核心字首。

除此之外,還可以使用(不常用):

6.設定元素的hidden

上面隱藏元素的方法都是大家常見的,也是眾所周之的。

當然除此之外還有一些特殊的小技巧,比如說:

7.將元素的font-sizeline-heightwidthheight設定為0

8.設定元素的transformtranslatex或者translatey的值為-100%

常用的三種隱藏元素方法不用點:

佔不佔文件位置的不同:

display:none隱藏後不佔據額外空間,它會產生回流和重繪。

visibility:hidden和opacity:0元素雖然隱藏了,但它們仍然佔據著空間,它們倆只會引起頁面重繪。

是否子元素繼承:

display:none不會被子元素繼承,但是父元素都不在了,子元素自然也就不會顯示了,皮之不存,毛之安附~~

visibility:hidden 會被子元素繼承,可以通過設定子元素visibility:visible 使子元素顯示出來

opacity: 0 也會被子元素繼承,但是不能通過設定子元素opacity: 0使其重新顯示

事件繫結的不同:

display:none            的元素都已經不再頁面存在了,因此肯定也無法觸發它上面繫結的事件;

visibility:hidden       元素上繫結的事件也無法觸發;

opacity: 0                 元素上面繫結的事件是可以觸發的。

過渡動畫的不同:

transition對於display肯定是無效的

transition對於visibility也是無效的

transition對於opacity是有效

CSS隱藏元素的幾種方法

css隱藏元素的幾種方法 1.display none 2.visibility hidden 3.clip path polygon 0px 0px,0px 0px,0px 0px,0px 0px 4.opacity 0 5.position absolute top 9999px left 99...

CSS「隱藏」元素的幾種方法的對比

首先我們分別來說說到底有哪幾種隱藏元素的方法,有一些方法是眾所周知的,還有一些算是一種技巧。display none 設定元素的display為none是最常用的隱藏元素的方法。123 hide 將元素設定為display none後,元素在頁面上將徹底消失,元素本來占有的空間就會被其他元素占有,也...

CSS隱藏元素的五種方法

1 opacity 0 2 visibility hidden 3 diaplay none 4 position absolute display display屬性依照詞義真正隱藏元素。將display屬性設為none確保元素不可見並且連盒模型也不生成。使用這個屬性,被隱藏的元素不佔據任何空間。...