前言

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

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

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

實現(xiàn)方式

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

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

display:none

設置元素的display為none是最常用的隱藏元素的方法

    .hide {
        display:none;
    }

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

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

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

特點：元素不可見，不占據(jù)空間，無法響應點擊事件

visibility:hidden

設置元素的visibility為hidden也是一種常用的隱藏元素的方法

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

    .hidden{
        visibility:hidden
     }

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

特點：元素不可見，占據(jù)頁面空間，無法響應點擊事件

opacity:0

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

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

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

    .transparent {
        opacity:0;
    }

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

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

特點：改變元素透明度，元素不可見，占據(jù)頁面空間，可以響應點擊事件

設置height、width屬性為0

將元素的margin，border，padding，height和width等影響元素盒模型的屬性設置成0，如果元素內(nèi)有子元素或內(nèi)容，還應該設置其overflow:hidden來隱藏其子元素

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

特點：元素不可見，不占據(jù)頁面空間，無法響應點擊事件

position:absolute

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

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

特點：元素不可見，不影響頁面布局

clip-path

通過裁剪的形式

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

特點：元素不可見，占據(jù)頁面空間，無法響應點擊事件

小結(jié)

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

區(qū)別

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

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

最新評論