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

今天就來分享5個關于如何去通過CSS隱藏文字或者HTML：

1、display: none;

display: none幾乎是每一個學會CSS基礎的人都喜歡用的隱藏方法，這種方法簡單暴力，但其實使用display: none進行隱藏，也會隱藏掉隱藏對象原有的占位空間，消失了無痕跡！

2、visibility: hidden;

和display:none; 相對應，為隱藏的對象保留物理占位空間。

3、overflow: hidden;

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

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

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

4、positon: absolute;

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

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

5、text-indent: -9999px

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

<a href="http://52shenghuonet.cn/">老白zblog</a>

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

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

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