CSS隐藏元素的几个方法(display,visibility)的区别
在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间;有的可以响应点击,有的不能响应点击。
{ display: none; /* 不占据空间,无法点击 */ }
{ visibility: hidden; /* 占据空间,无法点击 */ }
{ 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);
/* 不占据空间,无法点击 */
}
display:none和visibility:hidden
的区别
不同有三点:
- 空间占据
- 回流与渲染
- 株连性
第一点,想必都知道;
第二点,display:none
隐藏产生reflow和repaint(回流与重绘),而visibility:hidden
没有这个影响前端性能的问题;
第三点估计是不少同行不知道的,就是“株连性”方面的差异。
所谓“株连性”,就是如果祖先元素遭遇某祸害,则其子子孙孙无一例外也要遭殃。我顿时想起了《地球反击战》或是《木乃伊之蝎子王》,一旦把母体搞跛了,小辈啊、下属啊什么的都瞬间烟消云散。display:none
就是“株连性”明显的声明:一旦父节点元素应用了display:none
,父节点及其子孙节点元素全部不可见,而且无论其子孙元素如何不屈地挣扎都无济于事。
在实际的web应用中,我们要经常实现一些显示隐藏的功能,由于display:none
本身特性以及jQuery潜在的驱动,使得我们对display:none
这种隐藏特性相当熟知。因此,久而久之会形成比较牢固的情感化认识,并无法避免地将这种认识迁移到其他类似表现属性(eg. visibility
)的认识上,再加上一些常规经验……
举例来说吧,通常情况下,我们给一个父元素应用visibility:hidden
,则其子孙后代也都会全部不可见。于是,我们就会有类似的认识迁移:应用了visibility:hidden
声明下的子孙元素如何不屈地挣扎都摆脱不了不可见被抹杀的命运。而实际上却存在隐藏“失效”的情况。
何时隐藏“失效”?很简单,如果子孙元素应用了visibility:visible
,那么这个子孙元素又会刘谦般地显现出来。
对比总结:
display:none是个相当惨无人道的声明,子孙后代全部搞死(株连性),而且连块安葬的地方都不留(不留空间),导致全体民众哗然(渲染与回流)。
visibility:hidden
则具有人道主义关怀,虽然不得已搞死子孙,但是子孙可以通过一定手段避免(伪株连性),而且死后全尸,墓地俱全(占据空间),国内民众比较淡然(无渲染与回流)。
height:0和overflow:hidden的组合
overflow:hidden用中文理解就是“溢出隐藏”,也就是盒子以外的内容都咔嚓掉不可见的。加上height:0
,只要是一般的非inline水平元素,则元素内部所有子孙都应该是不可见的。
height:0
和overflow:hidden
组合隐藏“失效”的条件如下:祖先元素没有position:relative/absolute/fixed
声明,同时内部子元素应用了position:absolute/fixed
声明。
CSS隐藏元素的几个方法(display,visibility)的区别的更多相关文章
- css隐藏元素的几种方法与区别
css隐藏元素的几种方法与区别 一:display:none;隐藏不占位 display 除了不能加入 CSS3 动画豪华大餐之外,基本效果卓越,没什么让人诟病的地方. 二:position:abso ...
- CSS隐藏元素的几种方法
使用CSS隐藏元素的方法很多,在这里简单总结一下: 1.display:none display:none 应该是最常用的一种隐藏元素的方法,使用该方法隐藏的元素脱离文档流不占据空间,不会被浏览器解析 ...
- CSS“隐藏”元素的几种方法的对比
本文地址:http://luopq.com/2016/02/15/css-tricks-of-hide-element/,转载请注明 一说起CSS隐藏元素,我想大部分小伙伴们都会想到的第一种方法就是设 ...
- 用css隐藏元素的5种方法
.green { width: 100px; height: 100px; background-color: #a0ee00; text-align: center; float: left; ma ...
- CSS隐藏元素的五种方法
1.opacity:0 2.visibility:hidden 3.diaplay:none 4.position:absolute display display属性依照词义真正隐藏元素.将disp ...
- css隐藏元素的六类13种方法
隐藏元素的方法 隐藏元素的方法可以总结为六类:直接隐藏.对溢出内容隐藏.对元素透明度进行调整.将元素移除当前屏幕.对元素的层级关系进行调整.对元素进行裁剪 只有对元素的透明度进行调整才可以点击,其余都 ...
- 【前端】CSS隐藏元素的方法和区别
CSS隐藏元素的方法和区别 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- CSS隐藏元素的几种妙法
一说起CSS隐藏元素,我想大部分小伙伴们都会想到的第一种方法就是设置display为none.这是最为人所熟知也是最常用的方法.我相信还有不少人想到使用设置visibility为hidden来隐藏元素 ...
- 不同场景下使用CSS隐藏元素
使用 CSS 让元素不可见的方法很多,剪裁.定位到屏幕外.明度变化等都是可以的.虽然它们都是肉眼不可见,但背后却在多个维度上都有差别. 元素不可见,同时不占据空间.辅助设备无法访问.不渲染 使用 sc ...
随机推荐
- 教你如何修改FireFox打开新标签页(NewTab Page)的行列数
FireFox的打开新建标签页(即NewTab Page)默认只能显示3x3个网站缩略图,这9个自定义的网站,非常方便快捷,什么hao123的弱爆了,本人从未用过此类导航网站,曾经用过的也只是abou ...
- linux 实现自动创建ftp用户并创建文件夹
创建一个 createuser.sh的脚本文件 #!/bin/sh #传入的文件名 name=$1 #创建该用户所对应的ftp文件夹 /srv/ftp是我的ftp服务器的根目录 mkdir /sr ...
- [ python ] 软件开发规范
在python开发中,我们建议采用如下规范: soft/ ├── bin # 程序执行文件目录 │ ├── __init__.py │ └── start.py # 程序开始执行脚本文件 ├─ ...
- HTML文件编码
为了防止中文乱码,一般在网页头文件中加入 <meta http-equiv="Content-Type" content="text/html; charset=u ...
- java IntelliJ IDEA 13 注册码 IDEA序列号 License Key
java IntelliJ IDEA 13 注册码 IDEA序列号 License Key Username: JavaDeveloper@sskaje.me License: 282971-M1NW ...
- GUC-2 原子性
import java.util.concurrent.atomic.AtomicInteger; /* * 一.i++ 的原子性问题:i++ 的操作实际上分为三个步骤“读-改-写” * int i ...
- 通过NVM安装node
NVM(Node version manager)顾名思义,就是Node.js的版本管理软件,可以轻松的在Node.js各个版本间切换,项目源码GitHub 1.下载并安装NVM脚本 curl htt ...
- maven的认识
>>>>>>>>>> 安装完成后,设置为环境变量 命令行输入,如下图片就表明成功 >>>>>>>& ...
- aop相关术语
AOP是OOP的延续,是Aspect Oriented Programming的缩写,意思是面向切面的编程.并不是全部的AOP框架都是一样的.他们连接点模型的功能可能有强弱之分,有些可以字段,方法,构 ...
- 用于解析通过JS的escape函数加密过的数据
function js_unescape($str) { $ret = ''; $len = strlen($str); for ($i = 0; $i < $len; $i++) { if ( ...