css中元素不可見的幾種辦法

今天起床之後已經是11點多了。。。有點悲催了。然後出去吃個東西，我只能說太陽火辣辣的，順便拍了一張**，深圳就是太陽太好了，每天都是藍天白雲，這是帝都和北方的童鞋羨慕嫉妒~恨不恨我就不懂。票票的藍天白雲如下：

所以只能索性屁顛屁顛地吃完東西之後馬上回來，接著把房間裡裡外外打掃了一遍//有點小潔癖的雙子座visibility這個屬性，所以把目前自己知道幾種隱藏元素的標籤也一一羅列出來，當做是乙個小總結吧。

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

一般**我是都是這麼寫：

1

2

3

<divclass="hd">

<h3class="dn">境外報道

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

用法：display：none

優點：簡單暴力，不需要多餘**，缺點：元素從文件刪除，對於seo不利//本人觀點

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

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

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

文字文字<

/p>
p 

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

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

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

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

p

p

優點：利於搜尋引擎//本人觀點，缺點：暫無

//2023年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

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

css中元素的定位

float浮動 定義元素在哪個方向上浮動，通常是用在影象上，然後使文字圍繞周圍，但是，實際使用中，任何元素都可以浮動了，並且，設定此屬性後，該元素會生成乙個塊級框，近乎等於將其轉化為了塊級元素 position屬性中的absolute relative和fixed，先說absolute絕對定位，設定...

css中元素的水平居中

關於css元素的水平居中，有兩種辦法可以得到 一種是 自動定義margin的左右寬度來實現，一種是用position的相對定位和絕對定位來實現。舉乙個簡單的例子 href link onea li href link twoa li href link threea li href link fou...

css中元素的定位 position

網頁中元素的定位使用position屬性。position的可用值有 預設值。沒有定位，元素出現在正常的流中 忽略 top,bottom,left,right 或者 z index 宣告 生成絕對定位的元素，相對於瀏覽器視窗進行定位。元素的位置通過 left top right 以及 bottom ...