欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

前言

在平常的樣式排版中,我們經(jīng)常遇到將某個(gè)模塊隱藏的場景

通過css隱藏元素的方法有很多種,它們看起來實(shí)現(xiàn)的效果是一致的

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

實(shí)現(xiàn)方式

通過css實(shí)現(xiàn)隱藏元素方法有如下:

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

display:none

設(shè)置元素的displaynone是最常用的隱藏元素的方法

    .hide {
        display:none;
    }

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

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

消失后,自身綁定的事件不會(huì)觸發(fā),也不會(huì)有過渡效果

特點(diǎn):元素不可見,不占據(jù)空間,無法響應(yīng)點(diǎn)擊事件

visibility:hidden

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

從頁面上僅僅是隱藏該元素,DOM結(jié)果均會(huì)存在,只是當(dāng)時(shí)在一個(gè)不可見的狀態(tài),不會(huì)觸發(fā)重排,但是會(huì)觸發(fā)重繪

    .hidden{
        visibility:hidden
     }

給人的效果是隱藏了,所以他自身的事件不會(huì)觸發(fā)

特點(diǎn):元素不可見,占據(jù)頁面空間,無法響應(yīng)點(diǎn)擊事件

opacity:0

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

不會(huì)引發(fā)重排,一般情況下也會(huì)引發(fā)重繪

如果利用 animation 動(dòng)畫,對(duì) opacity 做變化(animation會(huì)默認(rèn)觸發(fā)GPU加速),則只會(huì)觸發(fā) GPU 層面的 composite,不會(huì)觸發(fā)重繪

    .transparent {
        opacity:0;
    }

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

需要注意的是:其子元素不能設(shè)置opacity來達(dá)到顯示的效果

特點(diǎn):改變元素透明度,元素不可見,占據(jù)頁面空間,可以響應(yīng)點(diǎn)擊事件

設(shè)置height、width屬性為0

將元素的marginborder,padding,heightwidth等影響元素盒模型的屬性設(shè)置成0,如果元素內(nèi)有子元素或內(nèi)容,還應(yīng)該設(shè)置其overflow:hidden來隱藏其子元素

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

特點(diǎn):元素不可見,不占據(jù)頁面空間,無法響應(yīng)點(diǎn)擊事件

position:absolute

將元素移出可視區(qū)域

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

特點(diǎn):元素不可見,不影響頁面布局

clip-path

通過裁剪的形式

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

特點(diǎn):元素不可見,占據(jù)頁面空間,無法響應(yīng)點(diǎn)擊事件

小結(jié)

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

區(qū)別

關(guān)于display: none、visibility: hidden、opacity: 0的區(qū)別,如下表所示:

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

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

相關(guān)文章

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

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

最新評(píng)論