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 的一些因素:

  1. 调整窗口大小(Resizing the window)

  2. 改变字体(Changing the font)

  3. 增加或者移除样式表(Adding or removing a stylesheet)

  4. 内容变化,比如用户在input框中输入文字(Content changes, such as a user typing text in an input box)

  5. 激活 CSS 伪类,比如 :hover (IE 中为兄弟结点伪类的激活)(Activation of CSS pseudo classes such as :hover (in IE the activation of the pseudo class of a sibling))

  6. 操作 class 属性(Manipulating the class attribute)

  7. 脚本操作 DOM(A script manipulating the DOM)

  8. 计算 offsetWidth 和 offsetHeight 属性(Calculating offsetWidth and offsetHeight)

  9. 设置 style 属性的值 (Setting a property of the style attribute)

  10. 未指定图片宽高,载入时会使页面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 使元素不可见,但是仍占据文档空间

上一篇:SQLSERVER的NULL


下一篇:Hbuilder护眼主题分享