如何用 CSS 让一个元素不可见?

2019-07-1009:59:20 2 130 人看过

一、CSS 元素隐藏

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 和 visiblility:hidden

目前,我所知道的不同有三点:

  1. 空间占据(display:none不占据空间,visibility:hidden仍占据中间。)
  2. 回流与渲染(display:none隐藏产生reflowrepaint(回流与重绘),而visibility:hidden没有这个影响前端性能的问题。
  3. 株连性

第三点估计是不少同行不知道的,就是“株连性”方面的差异。

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

在实际web应用中,我们要经常实现一些显示隐藏的功能,由于display:none本身提醒以及jQuery潜在的驱动,使得我们对display:none这种隐藏特性相当熟知。因此,久而久之会形成比骄傲牢固的情感化认知,并无法避免地将这种认识迁移到其他类似表现属性(eg.visibility)的认识上,再加上一些常规经验……

举例来说吧,通常情况下,我们给一个父元素应用visibility:hidden,则其子孙后代也都会全部看不见。于是,我们就会有类似的认识迁移:应用了visibility:hidden声明下的子孙元素如何不屈地挣扎都摆脱不了不可见被抹杀的命运。而实际上却存在隐藏“失效”的情况。何时隐藏“失效”?很简单,如果子孙元素应用了visibility:visible,那么这个子孙元素又会刘谦般地显现出来。

来源:用 css 的方法如何让一个元素不可见?

weinxin
博客小程序【一起行动派】
欢迎访问行动派博客小程序,小程序和博客同步更新,查看内容更加方便!
Action

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:2   其中:访客  2   博主  0

    • avatar wordpress建站吧 4

      确实好多方法,第一个最常用

      • avatar MAY的SEO博客 2

        我个人比较喜欢使用dispaly:none; 简单好用