css中有哪些方式可以隱藏頁面元素及區別

  發布時間:2022-06-14 16:59:03   作者: 肌肉記憶敲代碼   我要評論
在平常的樣式排版中,我們經常遇到將某個模塊隱藏的場景,本文主要介紹了css中有哪些方式可以隱藏頁面元素及區別,具有一定的參考價值,感興趣的可以了解一下

前言

在平常的樣式排版中,我們經常遇到將某個模塊隱藏的場景

通過css隱藏元素的方法有很多種,它們看起來實現的效果是一致的

但實際上每一種方法都有一絲輕微的不同,這些不同決定了在一些特定場合下使用哪一種方法

實現方式

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

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

display:none

設置元素的displaynone是最常用的隱藏元素的方法

    .hide {
        display:none;
    }

將元素設置為display:none后,元素在頁面上將徹底消失

元素本身占有的空間就會被其他元素占有,也就是說它會導致瀏覽器的重排和重繪

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

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

visibility:hidden

設置元素的visibilityhidden也是一種常用的隱藏元素的方法

從頁面上僅僅是隱藏該元素,DOM結果均會存在,只是當時在一個不可見的狀態,不會觸發重排,但是會觸發重繪

    .hidden{
        visibility:hidden
     }

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

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

opacity:0

opacity屬性表示元素的透明度,將元素的透明度設置為0后,在我們用戶眼中,元素也是隱藏的

不會引發重排,一般情況下也會引發重繪

如果利用 animation 動畫,對 opacity 做變化(animation會默認觸發GPU加速),則只會觸發 GPU 層面的 composite,不會觸發重繪

    .transparent {
        opacity:0;
    }

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

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

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

設置height、width屬性為0

將元素的margin,border,padding,heightwidth等影響元素盒模型的屬性設置成0,如果元素內有子元素或內容,還應該設置其overflow:hidden來隱藏其子元素

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

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

position:absolute

將元素移出可視區域

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

特點:元素不可見,不影響頁面布局

clip-path

通過裁剪的形式

    .hide {
      clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
    }

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

小結

最常用的還是display:nonevisibility:hidden,其他的方式只能認為是奇招,它們的真正用途并不是用于隱藏元素,所以并不推薦使用它們

區別

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

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

到此這篇關于css中有哪些方式可以隱藏頁面元素及區別的文章就介紹到這了,更多相關css隱藏頁面元素內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持腳本之家!

相關文章

  • CSS隱藏頁面元素的5種方法

    這篇文章主要為大家詳細介紹了CSS隱藏頁面元素的5種方法,大家可以根據具體情況選擇適合的方法來隱藏元素,感興趣的小伙伴們可以參考一下
    2016-07-06

最新評論

美丽人妻被按摩中出中文字幕