css隐藏元素display：none，opacity:0;filter：alpha(opacity=0-100;，visibility：hidden的区别

谁借莪１个温暖的怀抱￠ 2022-05-25 07:47 230阅读 0赞

在CSS中，让元素隐藏（指屏幕范围内肉眼不可见）的方法很多，有的占据空间，有的不占据空间；有的可以响应点击，有的不能响应点击。我们一般有三种方式：display:none, opacity:0;filter：alpha(opacity=0-100;, visibility:hidden。但这三种方式有何区别？  
  
  
一、三种隐藏方式的区别  
  
  
1、display:none  
  
  
（1）、浏览器不会生成属性为display: none;的元素。   
（2）、display: none;不占据空间，把元素隐藏起来，所以动态改变此属性时会引起重排（改变页面布局），可以理解成在页面中把该元素删除掉一样。  
  
  
（3）、display: none;不会被子孙继承，但是其子孙是不会显示的，毕竟都一起被隐藏了。   
（4）、display,是个尴尬的属性，transition对她无效。  
  
  
2、visibility:hidden  
  
  
（1）、元素会被隐藏，但是不会消失，依然占据空间，隐藏后不会改变html原有样式。   
（2）、visibility: hidden会被子孙继承，子孙也可以通过显示的设置visibility: visible;来反隐藏。   
（3）、visibility: hidden;不会触发该元素已经绑定的事件。   
（4）、visibility: hidden;动态修改此属性会引起重绘。   
（5）、visibility,transition对她无效。  
  
  
3、opacity:0;filter：alpha(opacity=0-100;（考虑浏览器兼容性的问题，最好两个都写上）  
  
  
（1）、opacity:0;filter：alpha(opacity=0-100;只是透明度为100%,元素隐藏，依然占据空间,隐藏后不会改变html原有样式。   
（2）、opacity:0;filter：alpha(opacity=0-100;会被子元素继承,且子元素并不能通过opacity=1，进行反隐藏。不能。   
（3）、opacity:0;filter：alpha(opacity=0-100;的元素依然能触发已经绑定的事件。   
（4）、opacity:0;filter：alpha(opacity=0-100;,transition对她有效。  
  
  
4.  
  
  
\{ display: none; /\* 不占据空间，无法点击 \*/ \}   
\{ visibility: hidden; /\* 占据空间，无法点击 \*/ \}   
  
  
\{ opacity: 0; filter:Alpha(opacity=0); /\* 占据空间，可以点击 \*/ \}   
\{ position: absolute; top: -999em; /\* 不占据空间，无法点击 \*/ \}   
\{ position: relative; top: -999em; /\* 占据空间，无法点击 \*/ \}   
\{ position: absolute; visibility: hidden; /\* 不占据空间，无法点击 \*/ \}   
\{ height: 0; overflow: hidden; /\* 不占据空间，无法点击 \*/ \}   
\{ position: absolute; opacity: 0; filter:Alpha(opacity=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则具有人道主义关怀，虽然不得已搞死子孙，但是子孙可以通过一定手段避免（伪株连性），而且死后全尸，墓地俱全（占据空间），国内民众比较淡然（无渲染与回流）。

原文：https://www.cnblogs.com/lqqchangeload/p/6065311.html