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

前言
在平常的樣式排版中,我們經(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è)置元素的display
為none
是最常用的隱藏元素的方法
.hide { display:none; }
將元素設(shè)置為display:none
后,元素在頁面上將徹底消失
元素本身占有的空間就會(huì)被其他元素占有,也就是說它會(huì)導(dǎo)致瀏覽器的重排和重繪
消失后,自身綁定的事件不會(huì)觸發(fā),也不會(huì)有過渡效果
特點(diǎn):元素不可見,不占據(jù)空間,無法響應(yīng)點(diǎn)擊事件
visibility:hidden
設(shè)置元素的visibility
為hidden
也是一種常用的隱藏元素的方法
從頁面上僅僅是隱藏該元素,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
將元素的margin
,border
,padding
,height
和width
等影響元素盒模型的屬性設(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:none
和visibility: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)文章
- 這篇文章主要為大家詳細(xì)介紹了CSS隱藏頁面元素的5種方法,大家可以根據(jù)具體情況選擇適合的方法來隱藏元素,感興趣的小伙伴們可以參考一下2016-07-06