主题：[转帖]css中元素不可见的几种办法

周末的时候看了一会书，提到了这个visibility这个属性，所以把目前自己知道几种隐藏元素的标签也一一罗列出来，当做是一个小总结吧。

之前我很喜欢用display：none来达到隐藏元素，简单粗暴，但是可能你也会注意到其他的网站有些会用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。但它允许负值，假如给它一个负值，这个负值足够大，大到一般我们浏览器无法显示，好像它跟浏览器宽度躲猫猫一样。假如说用户浏览器分辨率不够支撑其缩减的宽度，那么它就默认显示“没有”，但是它会占据网页空间，只不过是我们在前台“看不见”而已，但是它会影响到文档的布局，感觉它是悬挂在本文前面，一直挂到你电脑屏幕足够大显示它为止。

*用法：*text-indent:-999em

优点：利于搜索引擎，缺点：暂无 //有人说*text-indent:-999em缺点是隐藏在了一个太远的位置 导致影响到文档宽度，其实它并不是谁影响到文档宽度，它的作用其实就是把文字提到段落前面，不让我们看见，但是暂时不会影响其宽度，不过会影响到布局。

 3.position，我们都知道position是用来定位元素的，数值可正可负，假如说一个元素的距离我们的视窗（电脑显示屏幕）足够大，大到我们浏览器也无法显示出来，那么它也是“消失”的。但是这种做法一般适用于比较写死的东西，比如说要标明以下文字是干嘛的，基本是不会有所改动：

用法： position:absolute;top:-999em或left:-999em

优点：信手拈来，随意摆放，缺点：用法太死，不能随意修改，比较死板

 4.visibility，这个属性也是可以达到隐藏元素的目的，这个属性也是跟display属性正好相反，这个也只是“看不见”而已。用了该属性属性之后，元素在前端页面是解析不出来的，但是元素依然存在在哪里，只不过我们肉眼不可见，所以元素依然会影响到布局。

*用法：*visibility:hidden

优点：相对display会利于SEO优化，缺点：该属性会继承，假如祖先用了visibility:hidden，那么子元素也是直接显示不见，想要子元素显示让用户看见，还要必须再多写visibility：visible

 小结 ：总体来说，对于一般元素隐藏用text-indent比较靠谱，对于浏览器来说也是非常友好的，目前暂时没有大的问题出现；假如说对于已经写死的标签那么就可以考虑用position标签，接下来是visibility，最后是display，因为这个标签属性会把元素直接从文档中del删除了。那么就看你怎么用了。