css之10種隱藏元素的方法

1、通過設置width:0;或height:0;

div{width:0;}或div{height:0;}
但是這種方法隱藏不了文字。如果還想把文字隱藏可以,

div{font-size:0;}

2、將元素的opacity設置爲0。元素本身還在,只是透明瞭,所以該元素所佔的位置將不會改變。

div{opacity:0;}

3、用定位或者margin將元素移除屏幕範圍。

div{
position:absolute;
left:-9999px;
}或
div{
margin-left:-9999px;
}

4、通過text-indent實現隱藏文字的效果。這種效果類似將元素移除屏幕範圍

div{text-indent:-9999px;}

5、通過z-index隱藏一個元素

<style type="text/css">
p {
    background-color:#fff;
    position:absolute;
    left:0;
    top:0;
    }
.one{z-index:-1;}
.t{z-index:1;}
</style>
<body>
<p class="one">這是</p>
<p class="t">擦擦</p>
</body>

實現這種效果的前提是需要有個背景顏色(白色也行),就是不能爲透明,否則兩個文本將會重疊。

6、通過visibility將元素設置爲不可見,但是在頁面還是會佔據位置,和opacity效果類似。

div{visibility:hidden;}

7、通過display將元素徹底隱藏,並且不會佔位置

div{display:none;}

8、將背景設爲透明,字體大小設置爲0。雖看不到,但是仍佔位置

div{
    font-sizee:0;
    background-color:transparent;
}

9、通過transform的translate函數隱藏一個元素,

div{transform:translate(-9999px);}
這個原理就是講元素移除屏幕。

10、如果元素超出所設置寬、高,溢出的部分可以用overflow來隱藏。

div{overflow:hidden;}
同樣的文本也有溢出隱藏的屬性。

div{text-overflow:ellipsis;} //當字符超過7個,7個之後的文字將會被隱藏。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章