display、visibility和opactity的区别

1、display：none；

• DOM结构：浏览器不会渲染display属性为none的元素，不占据空间，意思就是页面上没有它的一席之地，你在开发者模式中选不中那个元素。
• 事件监听：无法进行DOM事件监听。
• 性能：动态改变此属性时会引起重排，性能较差。
• 继承：不会被子元素继承，因为子元素也不被渲染。
• transtion过渡不支持display。

2.、visibility：hidden；

• DOM结构：元素被隐藏了，浏览器会渲染visibility属性为hidden的元素，占据空间，意思就是页面上有它的空间，在开发者模式中能选中那个元素。
• 事件监听：无法进行DOM事件监听。
• 性能：动态改变此属性时会引起重绘，性能较高。
• 继承：会被子元素继承，子元素通过设置visibility:visible;来显示自身，使子元素取消自身隐藏。
• transtion：visibility会立即显示，隐藏时会延时。

3.、opacity：0；

• DOM结构：opacity属性值为0时透明度为100%，元素隐藏，占据空间，opacity值为0到1，为1时显示元素。
• 事件监听：可以进行DOM事件监听。
• 性能：提升为合成层，不会引发重绘，性能较高。
• 继承：会被子元素继承，子元素不能通过设置opacity:1;来取消隐藏。。
• transtion：opacity可以延时显示与隐藏。

说明：不会引发重排，一般情况下也会引发重绘，但是配合tansition、animation等使用不会触发重绘

如果利用 animation 动画，对 opacity 做变化（animation会默认触发GPU加速），则只会触发 GPU 层面的 composite，不会触发重绘

关于display: none、visibility: hidden、opacity: 0的区别，如下表所示：

	display: none	visibility: hidden	opacity: 0
页面中	不存在	存在	存在
重排	会	不会	不会
重绘	会	会	不一定
自身绑定事件	不触发	不触发	可触发
transition	不支持	支持	支持
子元素可复原	不能	能	不能
被遮挡的元素可触发事件	能	能	不能

其他隐藏元素方法：基本不会用

1、将元素的margin，border，padding，height和width等影响元素盒模型的属性设置成0，如果元素内有子元素或内容，还应该设置其overflow:hidden来隐藏其子元素

.hiddenBox {
    margin:0;     
    border:0;
    padding:0;
    height:0;
    width:0;
    overflow:hidden;
}

特点：元素不可见，不占据页面空间，无法响应点击事件

position:absolute

将元素移出可视区域

.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

特点：元素不可见，不影响页面布局

clip-path

通过裁剪的形式

.hide {
  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

特点：元素不可见，占据页面空间，无法响应点击事件