一、CSS元素隐藏

在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间;有的可以响应点击,有的不能响应点击。

{ display: none; /* 不占据空间,无法点击 */ }

{ visibility: hidden; /* 占据空间,无法点击 */ }

{ position: absolute; clip:rect(1px 1px 1px 1px); /* 不占据空间,无法点击 */ }

{ position: absolute; top: -999em; /* 不占据空间,无法点击 */ }

{ position: relative; top: -999em; /* 占据空间,无法点击 */ }

{ position: absolute; visibility: hidden; /* 不占据空间,无法点击 */ }

{ height: 0; overflow: hidden; /* 不占据空间,无法点击 */ }

{ opacity: 0; filter:Alpha(opacity=0); /* 占据空间,可以点击 */ }

{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占据空间,可以点击 */ }

{
zoom: 0.001;
-moz-transform: scale(0);
-webkit-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
/* IE6/IE7/IE9不占据空间,IE8/FireFox/Chrome/Opera占据空间。都无法点击 */

} {
position: absolute;
zoom: 0.001;
-moz-transform: scale(0);
-webkit-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
/* 不占据空间,无法点击 */

}

  

欢迎补充!

以上隐藏方法如果针对最小辈的子元素(膝下无子女),例如<img>图片元素,则上面的注释说明都是OK的(若有误,请指正)。

二、display:none和visibility:hidden

  display:nonevisibility:hidden的区别在哪儿?

  目前,我所知道的不同有三点(欢迎补充):

  1. 空间占据
  2. 回流与渲染
  3. 株连性

  第一点,想必都知道;第二点,display:none隐藏产生reflow和repaint(回流与重绘),而visibility:hidden没有这个影响前端性能的问题;第三点估计是不少同行不知道的,就是“株连性”方面的差异。

  何为株连性

  所谓“株连性”,就是如果祖先元素遭遇某祸害,则其子子孙孙无一例外也要遭殃。display:none就是“株连性”明显的声明:一旦父节点元素应用了display:none,父节点及其子孙节点元素全部不可见,而且无论其子孙元素如何不屈地挣扎都无济于事。

  一般情况下,大家都会用display:none;来隐藏某个需要隐藏的属性,而且乐此不疲,偶尔时候会应用visibility:hidden来隐藏元素以便为其下子元素保留位置,但是应用其会出现隐藏失效的情况。何时隐藏“失效”?很简单,如果子孙元素应用了visibility:visible那么这个子孙元素又会显现出来。visibility就是这样一个funny的属性。

对比总结:
`  display:none是个相当惨无人道的声明,子孙后代全部搞死(株连性),而且连块安葬的地方都不留(不留空间),导致全体民众哗然(渲染与回流)。
  visibility:hidden则具有人道主义关怀,虽然不得已搞死子孙,但是子孙可以通过一定手段避免(伪株连性),而且死后全尸,墓地俱全(占据空间),国内民众比较淡然(无渲染与回流)。

【转】http://www.zhangxinxu.com/wordpress/?p=2191

  可以去上面的连接查看更多关于元素隐藏的妙用.

CSS元素隐藏的display和visibility的更多相关文章

  1. css元素隐藏(display:none和visibility:hidden)

    在css中, display:none和visibility:hidden都能够使元素隐藏.但是两者所带来的效果完全不同. css  display:none 当使用该样式的时候,HTML元素的宽高等 ...

  2. css3-10 如何控制元素的显示和隐藏(display和visibility的区别是什么)

    css3-10 如何控制元素的显示和隐藏(display和visibility的区别是什么) 一.总结 一句话总结:使用的时候直接在元素的样式中设置display和visibility属性即可.推荐使 ...

  3. 您可能不知道的CSS元素隐藏“失效”以其妙用

    您可能不知道的CSS元素隐藏“失效”以其妙用 by zhangxinxu from http://www.zhangxinxu.com地址:http://www.zhangxinxu.com/word ...

  4. 您可能不知道的CSS元素隐藏“失效”以其妙用——张鑫旭

    一.CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.后宫选秀——一个一个看. { display: non ...

  5. CSS元素隐藏

    { display: none; /* 不占据空间,无法点击 */ } /*************************************************************** ...

  6. 你可能不知道的CSS元素隐藏“失效”以其妙用

    在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.后宫选秀--一个一个看. { display: none; /* 不占据空 ...

  7. CSS基础知识(display和visibility、overflow、文档流)

    9.显示与隐藏 u  display属性: (1)none:隐藏元素,不会再占有页面的任何空间,即不会影响布局. (2)inline:默认值.将元素[显示]为内联元素     (与HTML元素本身无关 ...

  8. CSS元素隐藏方法总结

    display:none; visibility:hidden; opacity:0三者的区别 display:none; 该属性会让元素完全从DOM中消失,浏览器不渲染设置该属性的元素,不占据DOM ...

  9. css元素隐藏方式

    1.opacity:设置一个元素的透明度 .hide {opacity: 0;} 2.visibility:设置一个元素可见\不可见.hide {visibility: hidden} .hide { ...

随机推荐

  1. JUC类图

    JUC的类图总览.

  2. Tool:Power Designer

    ylbtech-Tool:Power Designer 1.返回顶部 1. PowerDesigner最初由Xiao-Yun Wang(王晓昀)在SDP Technologies公司开发完成.Powe ...

  3. bzoj2962

    线段树+卷积 这个东西直接算不太好,但是合并两段结果却很方便,假设c[i]表示选i个数乘积的和,那么$a[i]=\sum_{j=0}^{i}{b[j]*c[i-j]}$ 线段树维护即可 #includ ...

  4. Even Three is Odd

    题意: 问题是对于所有的长度为n,且$1<=ai<=n$的整数序列求 $\prod_{i=1}^{n-2}{max \{w_i,w_{i+1},w_{i+2}}\}$ 之和. 解法: 首先 ...

  5. HDFS源码分析四-HDFS Client

    4. HDFS Client ( 未完待续 ) 目录: 4.1 认识 DFSClient ( 未完待续 ) 4.2 输入流 ( 未完待续 ) 4.3 输出流 ( 未完待续 ) 4.4 Distribu ...

  6. 【Hadoop】HDFS笔记(三):HDFS的Shell操作

    HDFS处理文件的命令和Linux命令差不多,但注意区分大小写. (Linux区分大小写,Windows不区分大小写) 一.fs命令 键入命令"./bin/hadoop fs"将输 ...

  7. Java 类加载器的作用

    深入探讨 Java 类加载器 成 富, 软件工程师, IBM 中国软件开发中心 成富任职于 IBM 中国软件开发中心,目前在 Lotus 部门从事 IBM Mashup Center 的开发工作.他毕 ...

  8. QDUOJ LC的课后辅导 单调递增栈

    LC的课后辅导 发布时间: 2015年9月19日 21:42   时间限制: 1000ms   内存限制: 256M 描述 有一天,LC给我们出了一道题,如图: 这个图形从左到右由若干个 宽为1 高不 ...

  9. html页面选择图片上传时实现图片预览功能

    实现效果如下图所示 只需要将下面的html部分的代码放入你的代码即可 (注意引入jQuery文件和html头部的css样式,使用的是ajax提交) <!-- 需引入jQuery 引入样式文件 引 ...

  10. Chrome开发者工具 debug 调试

    Chrome 的开发者工具分为 8 个大模块,每个模块及其主要功能为: Element 标签页: 用于查看和编辑当前页面中的 HTML 和 CSS 元素. Network 标签页:用于查看 HTTP ...