CSS隐藏元素的几种方法

1、display，使用none值会让元素从文档中直接删除，”直接消失不见了”

用法：display:none

优点：简单暴力，不需要多余代码。不占空间，对布局没影响。

缺点：元素从文档删除，不利于seo

2、text-indent，一般是首行缩2个中文字的用法是text-indent:2em。但当给他一个足够大的负值，大到一般我们浏览器无法显示。

用法：text-indent:-999em

优点：利于搜索引擎

缺点：它的作用其实就是把文字提到段落前面，不让我们看见，不影响宽度？

会影响布局。

3、position，假如说一个元素的距离我们的视窗（电脑显示屏幕）足够大，大到我们浏览器也无法显示出来，那么它也是“消失”的。但是这种做法一般适用于比较写死的东西。

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

   或  position:absolute; visibility:hidden;

优点：信手拈来，随意摆放

缺点：用法太死，不能随意修改，比较死板

4、visibility，只是“看不见”而已，所以元素依然会影响到布局

用法：visibility:hidden

优点：利于SEO优化

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

 

使用隐藏元素考虑的几个关键点:

（1）空间占据/页面可用性（屏幕阅读器）  （display跟visibility方式屏幕阅读器读不了）

（2）回流与渲染？  参考《回流（reflow）与重绘（repaint）》

so，使用absolute会产生重绘而不是产生强烈的回流。而使用display不仅会重绘，还会产生回流。而visibility没有这个影响前端性能的问题；

（3）株连性   （visibility的继承性）

（4）配合javascript的控制：

display:none为例，因为不同的标签所处的display水平不一样，例如div与span标签，很难有一个简单统一的显示方法。因为当对span标签显示dom.style.display="block";（造成原本单行显示换行）。jQuery的显隐方法show()/hide()/toggle()就是基于display的，其会存储元素先前的display属性值，于是元素再显示的时候就可以准确地显示出之前的display值了。

当使用绝对定位（position:absolute; top:-999em）的时候，js只需控制dom.style.position="stack";

so，控制元素显示与隐藏是absolute属性的正业所在。