我报名参加金石计划一期挑战——瓜分10万奖池，这是我的第1篇文章，点击查看活动详情

前言

最近成都疫情有点严重，办公基本都是居家线上办公。在协作方面，交流沟通方面有些许阻塞，所以需要花大量的时间去沟通解决问题，也就导致几乎没有太多时间去进行更文。这次更文也是由于接手的需求已提测，有了点闲暇时间，忙里偷闲的来更一篇文章，更完之后还要接着回去看有没有bug，有bug那就要继续占用时间去修复问题了。所以，掘友们，且行且珍惜呀。

这次要聊的主题就是CSS中隐藏页面元素的几种方式和区别，这应该是平时业务代码中会经常遇见的问题，想必掘友们一定知道一种或几种方法，那这次我们就一起来看看在CSS中到底有多少种隐藏页面元素的方法，以及它们之间有什么区别。

精彩就在后续，请往下看！

CSS中隐藏页面元素的方式

CSS中隐藏元素的方法大致总结出6种方式，虽然它们看起来实现的效果是一致的，但是实际使用种每一种方法都有一些不同之处，正是这些不同之处决定了在某些场合下该去选择哪一种方法的犹豫，这次就来一一揭开它们的面纱，让你能轻松抉择，let' go！

一、display: none

首先说的就是display: none，它可以说是业务代码中最常用来隐藏页面元素的方法。

div {
    display: none
}

它可以将元素在页面中彻底消失，而元素本身所占据的位置，会被其他元素占据，这就会导致浏览器进行重排和重绘；并且隐藏后，元素本身绑定的事件不会触发，也没有消失的过渡效果。

总结：元素不可见，不占据页面空间，无法响应点击事件，页面会发生冲排和重绘。

二、visibility: hidden

接着来说visibility: hidden，它也是常用的隐藏页面元素的方法。

div {
    visibility: hidden
}

它不仅可以隐藏页面元素，而且元素本身会存在页面中，即占据位置，只是它是处于一个不可见的状态而已；在页面中占据位置，那就不会发生重排，但是会发生重绘；元素本身的绑定的事件也不会触发。

总结：元素不可见，占据页面空间，无法响应点击事件，页面会发生重绘。

三、opacity: 0

接着再说opacity: 0，opacity属性表示元素的透明度。

div {
    opacity: 0
}

将元素的透明度设为0之后，元素是可以达到隐藏效果的，它不会引发浏览器重排，但是它一般是会引起重绘的；由于元素是存在于页面之上的，所以元素本身绑定的事件是可以被触发的，但是被它遮挡的元素是不能触发点击事件的。

总结：改变元素透明度从而实现隐藏效果，占据页面空间，可以响应点击事件，页面会发生重绘。

四、position: absolute

接着再说position: absolute，这其实是一个讨巧的方法，就是通过将元素移出页面从而达到隐藏的效果。

div {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

业务中其实是用它来做其他的事，例如：定义一个canvas标签，进入页面进行绘图，然后拿到绘制的图片进行展示，这是就可以将canvas容器设置为页面之外，不影响整个页面的渲染。

总结：通过将元素移出页面从而实现隐藏效果，不影响页面布局，无法响应点击事件。

五、宽高分别设为0

然后来说将元素的宽高都设为0的方式，当把元素的宽高都设为0了，这个元素自然就被“隐藏”了。

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

用此种方法需将width、height、margin、padding、border等影响元素盒模型的属性都为设为0；如果元素内含有子元素内容，还需要设置元素的overflow: hidden来隐藏子元素；宽高都没有了自然就无法响应点击事件了。

总结：通过将宽高等盒模型属性均设为0从而达到隐藏效果，不占据页面空间，无法响应点击事件。

六、clip-path

最后来说clip-path，clip-path属性使用裁剪方式创建元素的可显示区域，区域内的部分显示，区域外的隐藏。

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

polygon()为定义一个多边形。如：clip-path: polygon(17px 182px, 109px 23px, 199px 182px);就表示为定义了一个三角形，语法里面一个逗号多边形的一个顶点，有三个逗号则为三角形，依次类推（交叉可能不闭合就不会有多边形）。

这里将其全被设为0，则表示围不成一个多边形，也就没有元素节点，从而就达到了隐藏的效果；其在页面中是有空间的，但是无法响应点击事件的。

总结：通过裁减创建元素从而达到隐藏效果，占据页面空间，无法响应点击事件。

隐藏页面元素方式的区别

这里将拿display: none、visibility: hidden和opacity: 0进行区别，毕竟这3种是平时开发中最常用的方式，所以有必要对其进行介绍。如下：

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

看文至此，CSS中实现页面元素隐藏的方式和区别就介绍完了。虽说隐藏元素的方法有以上6种，但其实业务中常用的还是只有display: none和visibility: hidden这2种方式，其他的方法基本算隐藏页面元素的小技巧，在此还是不怎么优先选用它们。

插个题外话就是在写这篇文章的时候发生了地震，这是个小插曲，影响不大！最后，希望看完该文章的你能有所收获，栓Q~

后语

小伙伴们，如果觉得本文对你有些许帮助，点个👍或者➕个关注再走呗^_^ 。另外如果本文章有问题或有不理解的部分，欢迎大家在评论区评论指出，我们一起讨论共勉。