CSS元素隐藏的display和visibility
一、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:none
和visibility:hidden
的区别在哪儿?
目前,我所知道的不同有三点(欢迎补充):
- 空间占据
- 回流与渲染
- 株连性
第一点,想必都知道;第二点,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的更多相关文章
- css元素隐藏(display:none和visibility:hidden)
在css中, display:none和visibility:hidden都能够使元素隐藏.但是两者所带来的效果完全不同. css display:none 当使用该样式的时候,HTML元素的宽高等 ...
- css3-10 如何控制元素的显示和隐藏(display和visibility的区别是什么)
css3-10 如何控制元素的显示和隐藏(display和visibility的区别是什么) 一.总结 一句话总结:使用的时候直接在元素的样式中设置display和visibility属性即可.推荐使 ...
- 您可能不知道的CSS元素隐藏“失效”以其妙用
您可能不知道的CSS元素隐藏“失效”以其妙用 by zhangxinxu from http://www.zhangxinxu.com地址:http://www.zhangxinxu.com/word ...
- 您可能不知道的CSS元素隐藏“失效”以其妙用——张鑫旭
一.CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.后宫选秀——一个一个看. { display: non ...
- CSS元素隐藏
{ display: none; /* 不占据空间,无法点击 */ } /*************************************************************** ...
- 你可能不知道的CSS元素隐藏“失效”以其妙用
在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.后宫选秀--一个一个看. { display: none; /* 不占据空 ...
- CSS基础知识(display和visibility、overflow、文档流)
9.显示与隐藏 u display属性: (1)none:隐藏元素,不会再占有页面的任何空间,即不会影响布局. (2)inline:默认值.将元素[显示]为内联元素 (与HTML元素本身无关 ...
- CSS元素隐藏方法总结
display:none; visibility:hidden; opacity:0三者的区别 display:none; 该属性会让元素完全从DOM中消失,浏览器不渲染设置该属性的元素,不占据DOM ...
- css元素隐藏方式
1.opacity:设置一个元素的透明度 .hide {opacity: 0;} 2.visibility:设置一个元素可见\不可见.hide {visibility: hidden} .hide { ...
随机推荐
- 《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 ...
- Beyond Compare 简体版+注册码
Beyond Compare 3.3.4.14431 官方简体版+注册码 查阅全文 ›
- Java--23种设计模式之decorator模式
装饰模式:装饰模式以对客户端透明的方式扩展对象的功能,是继承关系的一个替代方案,提供比继承更多的灵活性.动态给一个对象增加功能,这些功能可以再动态的撤消.增加由一些基本功能的排列组合而产生的非常大量的 ...
- 同步数据库bat脚本
在开发中, 如果需要将测试数据库同步到本地进行本地的测试, 可以执行一下脚本进行同步 @ECHO off TITLE databaseBackup REM : 该脚本会将 191 的 database ...
- 18.Consent 实现思路介绍
讲一下实现Consent的逻辑 interaction它会根据returnUrl 输入用户名和密码后是在登陆的Controller,登陆完之后呢,会有一个returnUrl returnurl会被带到 ...
- Lombok减少代码冗余量
Eclipse需要安装,具体用法见: https://projectlombok.org/ 用maven project的朋友,一定要记得安装到IED里面才能使用,不然无法直接使用哦 从此以后和get ...
- vue中引入公共方法并使用
test.js文件(公共js文件) function myFun() { console.log('this is my function') } export { myfun } // 2 expo ...
- (水题)HDU - 1077 - Catching Fish - 计算几何
http://acm.hdu.edu.cn/showproblem.php?pid=1077 很明显这样的圆,必定有两个点在边界上.n平方枚举圆,再n立方暴力判断.由于没有给T,所以不知道行不行.
- CvvImage在高级别的Opencv2.4.11下的配置以及错误解决办法。
由于高版本的OpenCV2.4.11里取消了CImage(CvvImage),在此我们可以用老的版本替代. 在需要的地方引入 #include "CvvImage.h" 就可以用了 ...
- CodeForces 382C【模拟】
活生生打成了大模拟... #include <bits/stdc++.h> using namespace std; typedef long long LL; typedef unsig ...