CSS隐藏元素的几种方法

使用CSS隐藏元素的方法很多，在这里简单总结一下：

1、display:none

display:none 应该是最常用的一种隐藏元素的方法，使用该方法隐藏的元素脱离文档流不占据空间，不会被浏览器解析，不能点击，搜索引擎可能会认为被隐藏的文字属于垃圾信息而被忽略，而且屏幕阅读器（是为视觉上有障碍的人设计的读取屏幕内容的程序）会忽略被隐藏的文字。

2、visibility:hidden

使用 visibility:hidden 隐藏的元素，不能点击，但是会占据文档空间，不够灵活，一般配合 position:absolute 或 position:relative 使用。

PS：visibility:hidden 转换为 visibility:visible 跟 display:none 转换为 display:block 相比性能较好，因为 display 在切换可见性时会产生reflow，它要重新构建frame，所以要比 visibility:visible 慢。

顺带介绍一下 reflow

浏览器为了重新渲染部分或整个页面，重新计算页面元素位置和几何结构的进程叫做 reflow。
由于 reflow 是一种浏览器中的用户拦截操作，所以了解如何减少 reflow 次数，及不同的文档属性（DOM 层级，CSS 效率，不用类型的 style 变化）对 reflow 次数的影响对开发者来说非常必要。有时 reflow 页面中的一个元素会 reflow 它的父元素以及所有子元素。

引发 reflow 的一些因素：

调整窗口大小（Resizing the window）
改变字体（Changing the font）
增加或者移除样式表（Adding or removing a stylesheet）
内容变化，比如用户在input框中输入文字（Content changes, such as a user typing text in an input box）
激活 CSS 伪类，比如 :hover (IE 中为兄弟结点伪类的激活)（Activation of CSS pseudo classes such as :hover (in IE the activation of the pseudo class of a sibling)）
操作 class 属性（Manipulating the class attribute）
脚本操作 DOM（A script manipulating the DOM）
计算 offsetWidth 和 offsetHeight 属性（Calculating offsetWidth and offsetHeight）
设置 style 属性的值（Setting a property of the style attribute）
未指定图片宽高，载入时会使页面reflow

3、position:absolute; left(or another direction): -9999px;

使用 absolute 使元素脱离文档流，设置任一方向上足够远的偏移就可以使元素不在浏览者的视野内。

4、opacity:0; filter:Alpha(opacity=0);

将透明度设为 0 即可把元素“隐藏”，但是元素仍占据原有空间，且可响应点击事件。

5、overflow:hidden; height:0;

将元素的高度或者宽度设置为 0，对于非块状元素还要相应的设置 display 属性才能达到效果。

6、position、visibility、left(or another direction)、opacity任意组合

只要明确了 position:absolute 可以使元素脱离文档流，不占据文档空间， position:relative 使元素偏离当前的位置，但仍占据原来的空间，left(or another direction)控制元素偏离距离，visibility 控制元素是否可见，opacity 设置元素透明度。

就可以组合搭配达到想要的效果，例如：

position:absolute 配合 visibility:hidden 即可使元素脱离文档流，不占据文档空间并隐藏，类似达到 display:none 的效果

position:relative 配合 left:-9999px 使元素不可见，但是仍占据文档空间