CSS中隱藏頁面元素的幾種方式和區別

語言: CN / TW / HK

前言

在平常的樣式排版中,我們經常遇到將某個模塊隱藏的場景,通過css隱藏的元素方法有很多種,它們看起來實現的效果是一致的,但實際上每一種方法都有一絲輕微的不同,這些不同決定了在一些特定場合下使用哪一種方法。

實現方法綜合

通過css實現隱藏元素方法有如下:

  • display:none
  • visibility:hidden
  • opacity:0
  • 設置height、width模型屬性為0
  • position:absolute
  • clip-path

方法一:display:none

display:none是通常最實用的隱藏元素的方法

``` .conceal {    display:none }

```

將元素設置的display:none,可以將元素在頁面中徹底消失。此元素原本所佔據的位置,會被其他元素佔據,也就是説它會導致瀏覽器的重排的重繪

消失後,自身綁定的事件不會觸發,也不會有過渡效果

特點:元素不可見,不佔據空間,無法響應點擊事件

方法二:visibility:hidden

visibility:hidden也是非常常用的一種隱藏方式,但是跟display:none大有不同 visibility:hidden從頁面上來看僅僅是隱藏該元素,DOM結果依然會存在,只是處於一個不可見的狀態。不會發生重排,但是會發生重繪。

``` .conceal {    visibility:hidden  }

```

給人的效果是隱藏了,所以他的自身事件不會觸發。

特點:元素不可見,佔據空間,無法響應點擊事件

方法三: opacity:0

opacity屬性表示元素的透明度,將元素的透明度設置為0之後,在用户的嚴重,元素也是可以達到隱藏效果的 該方法不常用,不會引發重排,一般情況下也會引發重繪

``` .conceal {    opacity:0 }

```

它是存在於頁面之上的,所以他自身的事件仍然是可以觸發的,但被他遮擋的元素是不能觸發其他事件的

注意:其子元素不能設置opacity來達到顯示的效果

特點:改變元素透明度,元素不可見,佔據頁面空間,可以響應點點擊事件。

方法四:設置height、width模型屬性為0

要用這種方法實現隱藏需將元素的margin、border、padding、height和width等影響元素盒模型的屬性設置成0,如果元素內有子元素的內容,還要設置其overflow:hidden 來隱藏子元素

``` .conceal {     margin:0;          border:0;     padding:0;     height:0;     width:0;     overflow:hidden; }

```

特點:****元素不可見,不佔據空間,無法響應點擊事件

方法五:position:absolute

肯定看到這裏會很驚訝為什麼定位也能隱藏,其實我也是翻閲了一些資料之後才知道的,是將元素移出頁面,不可見,從而就達到了"隱藏效果"雖然用處也很多,但多數不是用於“隱藏”。

``` .conceal {    position: absolute;    top: -9999px;    left: -9999px; }

```

特點:****元素不可見,不影響佈局

方法六:clip-path

``` clip-path 通過裁剪的形式 .conceal {   clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px); }

```

特點:****元素不可見,佔據空間,無法響應點擊事件

總結:

最常用的還是方法一和方法二,其他的方式只能算是一種小妙招吧,很偏,因為它們的真正用途並不是用於隱藏元素所以本人是不推薦使用它們的。

區別:

關於display: none、visibility: hidden、opacity: 0的區別,如下表所示:

| | display: none | visibility: hidden | opacity: 0 | | ----------- | ------------- | ------------------ | ---------- | | 頁面中 | 不存在 | 存在 | 存在 | | 重排 | 會 | 不會 | 不會 | | 重繪 | 會 | 會 | 不一定 | | 自身綁定事件 | 不觸發 | 不觸發 | 可觸發 | | transition | 不支持 | 支持 | 支持 | | 子元素可復原 | 不能 | 能 | 不能 | | 被遮擋的元素可觸發事件 | 能 | 能 | 不能 |

- End -