通過CSS隱藏一段文字，甚至隱藏一段HTML都是經(jīng)常需要用到的，不管是暫時(shí)不需要的模塊或者當(dāng)前窗口寬度不足的自適應(yīng)，都幾乎必須用到CSS隱藏！

今天就來分享5個(gè)關(guān)于如何去通過CSS隱藏文字或者HTML：

1、display: none;

display: none幾乎是每一個(gè)學(xué)會(huì)CSS基礎(chǔ)的人都喜歡用的隱藏方法，這種方法簡(jiǎn)單暴力，但其實(shí)使用display: none進(jìn)行隱藏，也會(huì)隱藏掉隱藏對(duì)象原有的占位空間，消失了無痕跡！

2、visibility: hidden;

和display:none; 相對(duì)應(yīng)，為隱藏的對(duì)象保留物理占位空間。

3、overflow: hidden;

overflow: hidden也是可以讓對(duì)象隱藏的無影無蹤，我們最常用overflow: hidden的作用是清除浮動(dòng)吧，但如果讓對(duì)象的width和height都為0的話，再加上overflow: hidden就可以讓對(duì)象直接消失，比如：

.text{
        display: block;
        overflow: hidden;
        width: 0;
        height: 0;
}

其中.text沒有寬和高，切記！

4、positon: absolute;

用絕對(duì)定位將其推出可視區(qū)，不過雖然可視性不存在，但仍占據(jù)物理空間，與隱藏文字的宗旨相背，另外我個(gè)人不喜歡用絕對(duì)坐標(biāo)定位magin這個(gè)屬性，margin在不同瀏覽器中總是帶來不可預(yù)料的Bug。

.text {
        positon: absolute;
        margin-top: -9999px;
        margin-left:- 9999px;
}

5、text-indent: -9999px

text-indent: -9999px的這種方法，我最常見到的用途幾乎是在logo上，比如HTML：

<a href="http://www.lofty888.cn/">老白zblog</a>

以上這段代碼如果是logo的話，并且顯示圖片，就只能通過背景圖片的方式，把logo圖顯示出來，但老白zblog這幾個(gè)文字又必須消失，不能與logo背景圖片同時(shí)存在吧，所以此時(shí)，最好的方法就是使用text-indent: -9999px，把文字甩到屏幕找不到的地方，這種logo方法既能顯示圖片，又能對(duì)SEO很友好！

a {
        height: 30px;
        width: 165px;
        float: left;
        text-indent: -9999px; /*把老白zblog這幾個(gè)文字甩出去*/
        background-image: url(images/logo.gif); /*背景圖片*/
        background-repeat: no-repeat; /*背景圖片不重復(fù)*/
        display: block; /*把a(bǔ)設(shè)置為塊級(jí)元素*/
        position: relative;
}

以上5種方法都可以實(shí)現(xiàn)隱藏的目的，但用途和用法又有著很大的區(qū)別，必須活血活用，直接套用任何一個(gè)都不能成為一個(gè)好的前端！