CSS对于元素隐藏的几种方法

对于隐藏元素

之前我很喜欢用

display：none

来达到隐藏元素，简单粗暴，特别是对于标题用背景图来做代替的，比如像这样：



一般代码我是都是这么写：

为什么要这么写呢，一来可以方便修改，直接查找关键词即可；二来后端的同事在调用相关新闻的时候可以知道这是调用到哪个栏目的内容；三来应该说是有利于搜索引擎，毕竟搜索引擎只抓代码和字段，它不会去分析你这个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

。但它允许负值，假如给它一个负值，这个负值足够大，大到一般我们浏览器无法显示，好像它跟浏览器宽度躲猫猫一样。假如说用户浏览器分辨率不够支撑其缩减的宽度，那么它就默认显示“没有”，但是它会占据网页空间，只不过是我们在前端“看不见”而已，但是它会影响到文档的布局，感觉它是悬挂在本文前面，一直挂到你电脑屏幕足够大显示它为止。

为了语义化，我们可能会利用图片替换文字的方式来给我们的站点增色，举个栗子：

<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删除了。那么就看你怎么用了，下面是各个元素的代码，仅供参考。