CSS隐藏元素的几个方法(display,visibility)的区别
在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间;有的可以响应点击,有的不能响应点击。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | { 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
声明。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!