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個之後的文字將會被隱藏。