一、前言
今天起床之後已經是11點多了。。。有點悲催了。然後出去吃個東西，我隻能說太陽火辣辣的，順便拍了一張照片，深圳就是太陽太好了，每天都是藍天白雲，這是帝都和北方的童鞋羨慕嫉妒~恨不恨我就不懂。票票的藍天白雲如下：
是以隻能索性屁颠屁颠地吃完東西之後馬上回來，接着把房間裡裡外外打掃了一遍//有點小潔癖的雙子座
，看了一會書，提到了這個
visibility
這個屬性，是以把目前自己知道幾種隐藏元素的标簽也一一羅列出來，當做是一個小總結吧。
二、對于隐藏元素
之前我很喜歡用
display：none
來達到隐藏元素，簡單粗暴，特别是對于标題用背景圖來做代替的，比如像這樣：
一般代碼我是都是這麼寫：
| 1 2 3 | |
為什麼要這麼寫呢，一來可以友善修改，直接查找關鍵詞即可；二來後端的同僚在調用相關新聞的時候可以知道這是調用到哪個欄目的内容；三來應該說是有利于搜尋引擎，畢竟搜尋引擎隻抓代碼和字段，它不會去分析你這個css到底是寫什麼，是以盡可能的用文字來寫，而少用圖檔直接插入。但是可能你也會注意到其他的網站有些會用
text-indent
、
position
、還有些會用到
visibility
，假如他們隻是用做隐藏文字或者div可見的情況下，我覺得基本都一樣，寫頁面的人習慣用哪樣就可以選擇哪樣的寫法。下面我來說具體的一些寫法哈。
1、display，這個屬性是改變一個元素的顯示效果，之前我有提到一點，假如元素使用了none值，那麼元素直接幹淨利落的消失不見。你在右鍵審查元素的時候找到該處會顯示為0×0，神馬，不信，你試試。之是以會完全沒有看見是以為使用了
display：none
這個标簽，使用none值會讓元素從文檔中直接删除，是以它沒有對布局産生任何的影響，就是真的消失不見了，前端根本顯示不出來。
用法：
display：none
優點：簡單暴力，不需要多餘代碼，缺點：元素從文檔删除，對于seo不利//本人觀點
但是我們經常看見的很多的時候并不是使用代碼，好像有些人喜歡用
text-indent
2.text-indent，這個屬性本來是用來設定文本縮進的，一般我們習慣是首行縮2個中文字是以一般的用法是
text-indent:2em
。但它允許負值，假如給它一個負值，這個負值足夠大，大到一般我們浏覽器無法顯示，好像它跟浏覽器寬度躲貓貓一樣。假如說使用者浏覽器分辨率不夠支撐其縮減的寬度，那麼它就預設顯示“沒有”，但是它會占據網頁空間，隻不過是我們在前端“看不見”而已，但是它會影響到文檔的布局，感覺它是懸挂在本文前面，一直挂到你電腦螢幕足夠大顯示它為止。
為了語義化，我們可能會利用圖檔替換文字的方式來給我們的站點增色，舉個栗子：
<p>文字文字</p>
p {
text-indent: -2500px; // 小，在高分辨率寬屏下文字隐藏失敗
//text-indent: -99999px; // 大，但可能存在性能問題，甚至被搜尋引擎屏蔽
background: url(logo.png);
}
這段代碼中我們希望隐藏文字，提升 SEO，是以使用 logo.png 這個圖檔進行替換，這時會對文字設定一個負縮進值。
這裡的 -2500px 在以前基本可以解決隐藏文字的問題，但目前發現高分辨率浏覽器下這個值已經在浏覽器可視範圍内了，造成文字隐藏失敗的問題。
而如果将這個值設定為更大，如 -99999px 時，又會造成浏覽器的性能問題：浏覽器需要生成一個寬度為 99999px 的盒模型，是以也要限制這個值的大小。
還有人指出，不少人濫用這個屬性為了提升 SEO ，而搜尋引擎可能會反過來屏蔽這裡的文字。
除此之外，在從右到左讀的語言環境中，這個負值可能會造成很長的橫向滾動條，是以可以添加 direction 規則來避免：
p {
text-indent: -9999px; // 萬一日後使用者螢幕寬度達到1萬腫麼辦？（這好像不可能。。。）
background: url(logo.png);
direction: ltr; // 設定為從左到右讀的方向，避免 rtl 語言環境下出現橫向滾動條
}
一個比較好的可選方案：
p {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background: url(logo.png);
} 用法：
text-indent:-999em
優點：利于搜尋引擎//本人觀點，缺點：暫無
//2014年08月13日更新：這個text-indent屬性僅适用于塊級元素，行内元素比如span對其不感冒
3.position，我們都知道
position
是用來定位元素的，數值可正可負，假如說一個元素的距離我們的視窗（電腦顯示螢幕）足夠大，大到我們浏覽器也無法顯示出來，那麼它也是“消失”的。但是這種做法一般适用于比較寫死的東西，比如說要标明以下文字是幹嘛的，基本是不會有所改動：
用法：
position:absolute;top:-999em或left:-999em
優點：信手拈來，随意擺放，缺點：用法太死，不能随意修改，比較死闆
4.visibility，這個屬性也是可以達到隐藏元素的目的，這個屬性也是跟display屬性正好相反，這個也隻是“看不見”而已。用了該屬性屬性之後，元素在前端頁面是解析不出來的，但是元素依然存在在哪裡，隻不過我們肉眼不可見，是以元素依然會影響到布局。
用法：
visibility:hidden
優點：相對display會利于SEO優化//本人觀點，缺點：該屬性會繼承，假如祖先用了
visibility:hidden
，那麼子元素也是直接顯示不見，想要子元素顯示讓使用者看見，還要必須再多寫
visibility：visible
//2014月8月19日更新 來自 HTML-JS 僅愚 童鞋機制的分享~
1、使用超小字型：font:0/0 arial; 2、擠出法：width:0;padding:**px; 3、透明法，opacity為0
下面一一說明
5.opacity，這個是用到了元素不透明度的辦法。這個不失為一個好的辦法，巧妙地把元素不透明直接調節到了0，讓其消失得無影無蹤，詳細介紹可以移步 opacity屬性值 ，但是這樣的寫法蛋疼的就是IE6~IE8對opicty不感冒，必須要用IE透明專屬寫法：filter:alpha(opacity=x)，x為元素的不透明值，從10~100,100為全不透明.
用法：
opacity:.5;filter:alpha(opacity=x);
優點：優點的話，現代浏覽器 IE10+ 認opacity這個不透明度的屬性，可以直接用這個屬性值。缺點：缺點也是如此，非現代浏覽器IE9以下的是不認opacity屬性的，是以隻能用filter私有标簽，但是此标簽并非在所有IE家族都奏效（這個值會産生ActiveX控件，是以假如你的IE下不透明度不管用，那就要檢視你的是否把ActiveX控件禁用，或者是把安全級别調到最高，故此方法不推薦.）
6.font-size。這個值是利用了字型大小來控制，通常我們預設的網頁字型大小為12-14px，那麼當我們文字大小控制到0px是否就可以控制文字”消失“呢？如：font-size:0 ，通過domo我們可以看見對于IE6~7，0像素的文字依然是奏效的，它會顯示如下
用法：
font-size:0
優點：IE8+，現代浏覽器對0像素字型奏效，既然是0像素字型，根本就不存在占用文檔空間。缺點：IE6~7對0像素的字型依然奏效，故會顯示在前端頁面（不推薦.）
7.width=0，padding:**px，對于此童鞋最後這個辦法，表示估計當時它應該是想要height:0，而不是width+padding，因為這個兩個屬性對于隐藏起不到任何的作用，一般通常的做法是height:0，overflow:hidden，這樣倒是可以讓元素隐藏。
用法：
height:0;overflow:hidden
優點：代碼相容性強，缺點：需要鍵入的代碼字元較多，故也不推薦。
三、小結
總體來說，對于一般元素隐藏用
text-indent
比較靠譜，對于浏覽器來說也是非常友好的，目前暫時沒有大的問題出現；假如說對于已經寫死的标簽那麼就可以考慮用
position
标簽，接下來是
visibility
，最後是
display
，因為這個标簽屬性會把元素直接從文檔中del删除了。那麼就看你怎麼用了，下面是各個元素的代碼，僅供參考。