一、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. 《The challenge of realistic music generation: modelling raw audio at scale》论文阅读笔记

    The challenge of realistic music generation: modelling raw audio at scale 作者:Deep  mind三位大神 出处:NIPS ...

  2. Beyond Compare 简体版+注册码

    Beyond Compare 3.3.4.14431 官方简体版+注册码 查阅全文 ›

  3. Java--23种设计模式之decorator模式

    装饰模式:装饰模式以对客户端透明的方式扩展对象的功能,是继承关系的一个替代方案,提供比继承更多的灵活性.动态给一个对象增加功能,这些功能可以再动态的撤消.增加由一些基本功能的排列组合而产生的非常大量的 ...

  4. 同步数据库bat脚本

    在开发中, 如果需要将测试数据库同步到本地进行本地的测试, 可以执行一下脚本进行同步 @ECHO off TITLE databaseBackup REM : 该脚本会将 191 的 database ...

  5. 18.Consent 实现思路介绍

    讲一下实现Consent的逻辑 interaction它会根据returnUrl 输入用户名和密码后是在登陆的Controller,登陆完之后呢,会有一个returnUrl returnurl会被带到 ...

  6. Lombok减少代码冗余量

    Eclipse需要安装,具体用法见: https://projectlombok.org/ 用maven project的朋友,一定要记得安装到IED里面才能使用,不然无法直接使用哦 从此以后和get ...

  7. vue中引入公共方法并使用

    test.js文件(公共js文件) function myFun() { console.log('this is my function') } export { myfun } // 2 expo ...

  8. (水题)HDU - 1077 - Catching Fish - 计算几何

    http://acm.hdu.edu.cn/showproblem.php?pid=1077 很明显这样的圆,必定有两个点在边界上.n平方枚举圆,再n立方暴力判断.由于没有给T,所以不知道行不行.

  9. CvvImage在高级别的Opencv2.4.11下的配置以及错误解决办法。

    由于高版本的OpenCV2.4.11里取消了CImage(CvvImage),在此我们可以用老的版本替代. 在需要的地方引入 #include "CvvImage.h" 就可以用了 ...

  10. CodeForces 382C【模拟】

    活生生打成了大模拟... #include <bits/stdc++.h> using namespace std; typedef long long LL; typedef unsig ...