對於隱藏元素

之前我很喜歡用display：none來達到隱藏元素，簡單粗暴，特別是對於標題用背景圖來做代替的，比如像這樣：

一般程式碼我是都是這麼寫：

為什麼要這麼寫呢，一來可以方便修改，直接查詢關鍵詞即可；二來後端的同事在呼叫相關新聞的時候可以知道這是呼叫到哪個欄目的內容；三來應該說是有利於搜尋引擎，畢竟搜尋引擎只抓程式碼和欄位，它不會去分析你這個css到底是寫什麼，所以儘可能的用文字來寫，而少用圖片直接插入。但是可能你也會注意到其他的網站有些會用text-indent

1、display，這個屬性是改變一個元素的顯示效果，之前我有提到一點，假如元素使用了none值，那麼元素直接乾淨利落的消失不見。你在右鍵審查元素的時候找到該處會顯示為0×0，神馬，不信，你試試。之所以會完全沒有看見是以為使用了display：none這個標籤，使用none值會讓元素從文件中直接刪除，所以它沒有對佈局產生任何的影響，就是真的消失不見了，前端根本顯示不出來。

用法：display：none

優點：

但是我們經常看見的很多的時候並不是使用程式碼，好像有些人喜歡用text-indent

2.text-indent，這個屬性本來是用來設定文字縮排的，一般我們習慣是首行縮2箇中文字所以一般的用法是text-indent:2em。但它允許負值，假如給它一個負值，這個負值足夠大，大到一般我們瀏覽器無法顯示，好像它跟瀏覽器寬度躲貓貓一樣。假如說使用者瀏覽器解析度不夠支撐其縮減的寬度，那麼它就預設顯示“沒有”，但是它會佔據網頁空間，只不過是我們在前端“看不見”而已，但是它會影響到文件的佈局，感覺它是懸掛在本文前面，一直掛到你電腦螢幕足夠大顯示它為止。

為了語義化，我們可能會利用圖片替換文字的方式來給我們的站點增色，舉個栗子：

<code class=" language-javascript" style="padding: 0px; font-family: Consolas, Monaco, "Andale Mono", monospace; font-size: 12px; border: 0px; direction: ltr; word-spacing: normal; background-color: transparent;">        <span class="token operator" style="color: rgb(166, 127, 89);"><</span>p<span class="token operator" style="color: rgb(166, 127, 89);">></span>文字文字<span class="token operator" style="color: rgb(166, 127, 89);"><</span><span class="token operator" style="color: rgb(166, 127, 89);">/</span>p<span class="token operator" style="color: rgb(166, 127, 89);">></span>

        p <span class="token punctuation" style="color: rgb(153, 153, 153);">{</span>
            text<span class="token operator" style="color: rgb(166, 127, 89);">-</span>indent<span class="token punctuation" style="color: rgb(153, 153, 153);">:</span> <span class="token operator" style="color: rgb(166, 127, 89);">-</span>2500px<span class="token punctuation" style="color: rgb(153, 153, 153);">;</span>       <span class="token comment" style="margin-top: 20px; margin-left: 0px; color: rgb(112, 128, 144); background: none !important;"> // 小，在高解析度寬屏下文字隱藏失敗
</span>           <span class="token comment" style="margin-top: 20px; margin-left: 0px; color: rgb(112, 128, 144); background: none !important;"> //text-indent: -99999px;     // 大，但可能存在效能問題，甚至被搜尋引擎遮蔽
</span>            background<span class="token punctuation" style="color: rgb(153, 153, 153);">:</span> <span class="token function">url<span class="token punctuation" style="color: rgb(153, 153, 153);">(</span></span>logo<span class="token punctuation" style="color: rgb(153, 153, 153);">.</span>png<span class="token punctuation" style="color: rgb(153, 153, 153);">)</span><span class="token punctuation" style="color: rgb(153, 153, 153);">;</span>
        <span class="token punctuation" style="color: rgb(153, 153, 153);">}</span>
</code>

這段程式碼中我們希望隱藏文字，提升 SEO，所以使用 logo.png 這個圖片進行替換，這時會對文字設定一個負縮排值。

這裡的 -2500px 在以前基本可以解決隱藏文字的問題，但目前發現高解析度瀏覽器下這個值已經在瀏覽器可視範圍內了，造成文字隱藏失敗的問題。

而如果將這個值設定為更大，如 -99999px 時，又會造成瀏覽器的效能問題：瀏覽器需要生成一個寬度為 99999px 的盒模型，所以也要限制這個值的大小。

還有人指出，不少人濫用這個屬性為了提升 SEO ，而搜尋引擎可能會反過來遮蔽這裡的文字。

除此之外，在從右到左讀的語言環境中，這個負值可能會造成很長的橫向滾動條，所以可以新增 direction 規則來避免：

<code class=" language-javascript" style="padding: 0px; font-family: Consolas, Monaco, "Andale Mono", monospace; font-size: 12px; border: 0px; direction: ltr; word-spacing: normal; background-color: transparent;">         p <span class="token punctuation" style="color: rgb(153, 153, 153);">{</span>
            text<span class="token operator" style="color: rgb(166, 127, 89);">-</span>indent<span class="token punctuation" style="color: rgb(153, 153, 153);">:</span> <span class="token operator" style="color: rgb(166, 127, 89);">-</span>9999px<span class="token punctuation" style="color: rgb(153, 153, 153);">;</span><span class="token comment" style="margin-top: 20px; margin-left: 0px; color: rgb(112, 128, 144); background: none !important;"> // 萬一日後使用者螢幕寬度達到1萬腫麼辦？（這好像不可能。。。）
</span>            background<span class="token punctuation" style="color: rgb(153, 153, 153);">:</span> <span class="token function">url<span class="token punctuation" style="color: rgb(153, 153, 153);">(</span></span>logo<span class="token punctuation" style="color: rgb(153, 153, 153);">.</span>png<span class="token punctuation" style="color: rgb(153, 153, 153);">)</span><span class="token punctuation" style="color: rgb(153, 153, 153);">;</span>
            direction<span class="token punctuation" style="color: rgb(153, 153, 153);">:</span> ltr<span class="token punctuation" style="color: rgb(153, 153, 153);">;</span><span class="token comment" style="margin-top: 20px; margin-left: 0px; color: rgb(112, 128, 144); background: none !important;"> // 設定為從左到右讀的方向，避免 rtl 語言環境下出現橫向滾動條
</span>        <span class="token punctuation" style="color: rgb(153, 153, 153);">}</span>
</code>

一個比較好的可選方案：

<code class=" language-javascript" style="padding: 0px; font-family: Consolas, Monaco, "Andale Mono", monospace; font-size: 12px; border: 0px; direction: ltr; word-spacing: normal; background-color: transparent;">        p <span class="token punctuation" style="color: rgb(153, 153, 153);">{</span> 
            text<span class="token operator" style="color: rgb(166, 127, 89);">-</span>indent<span class="token punctuation" style="color: rgb(153, 153, 153);">:</span> <span class="token number" style="color: rgb(153, 0, 85);">100</span><span class="token operator" style="color: rgb(166, 127, 89);">%</span><span class="token punctuation" style="color: rgb(153, 153, 153);">;</span> 
            white<span class="token operator" style="color: rgb(166, 127, 89);">-</span>space<span class="token punctuation" style="color: rgb(153, 153, 153);">:</span> nowrap<span class="token punctuation" style="color: rgb(153, 153, 153);">;</span> 
            overflow<span class="token punctuation" style="color: rgb(153, 153, 153);">:</span> hidden<span class="token punctuation" style="color: rgb(153, 153, 153);">;</span> 
            background<span class="token punctuation" style="color: rgb(153, 153, 153);">:</span> <span class="token function">url<span class="token punctuation" style="color: rgb(153, 153, 153);">(</span></span>logo<span class="token punctuation" style="color: rgb(153, 153, 153);">.</span>png<span class="token punctuation" style="color: rgb(153, 153, 153);">)</span><span class="token punctuation" style="color: rgb(153, 153, 153);">;</span>
        <span class="token punctuation" style="color: rgb(153, 153, 153);">}</span></code>

用法：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刪除了。那麼就看你怎麼用了，下面是各個元素的程式碼，僅供參考。