CSS中隐藏页面元素的6种方式及其区别

前言

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

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

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

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

div {
    display: none
}

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

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

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

div {
    visibility: hidden
}

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

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

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

div {
    opacity: 0
}

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

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

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

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

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

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

然后来说将元素的宽高都设为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属性使用裁剪方式创建元素的可显示区域，区域内的部分显示，区域外的隐藏。

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种是平时开发中最常用的方式，所以有必要对其进行介绍。如下：