在平常的学习和工作中，我们会经常碰到需要将元素隐藏或者显示出来的操作，实现的方式有很多种，今天我们来汇总一些比较常用的方式，养成一个归纳总结的好习惯。

1、通过style属性中的  display : none   （这种是最常用方式之一 ）。

将元素隐藏可以设置display:none，这种方式隐藏元素后，元素将不占用文档流。

display : none;

2 、通过style属性中的  visibility : hidden  （这种也是最常用的方式之一 ）。

visibility 设置为 hidden之后, 该元素仍然占用文档流, 只不过是看不见了而已。

visibility : hidden;

3、通过相对定位移动当前元素到屏幕左侧

相对定位的特点是元素会相对于自己当前所在的位置发生偏移，那么我们可以配合left、right、top、bottom等偏移属性将元素移走就可以实现元素隐藏的效果啦。

.box{     
    position: relative;     
    left: -100%
}

这种方法实现时，需注意：第一，元素仍然占用标准文档流 ；第二，left、right、top、bottom中使用百分比这个单位，是相对于包含块的宽度和高度的，一定要额外注意哦。

4 、通过元素内文本对齐将子元素移动到父元素右侧, 配合超出后不显示

.box{    
    text-indent: 100%;    
    white-space: nowrap;    
    overflow: hidden;
}

注意：此时子元素仍然占用文档流, 只是我们隐藏了超出部分。

5、设置元素的宽度和高度为0, 元素直接消失

.box{    
    width: 0;    
    height: 0;
}

注意: 高度和宽度都设置为0后，我们就可以认为此元素不再占用其父元素的标准文档流了, 但是这个容器仍然存在， 这个容器也存在一个标准文档流。供其子元素使用； 因此其子元素不会消失， 仍然会正常显示，但是不会占用其父元素所在的标准文档流( 即子元素显示不会受其影响, 此元素占用文档流的大小也不会受其子元素的影响 )。

6 、设置元素透明度为 0

opacity属性本身是一个透明度属性，用于调整整个模块的透明度或者图片的透明度，那么元素隐藏效果我们可以通过将元素透明这种方式来达到视觉效果。

.box{    
    opacity: 0;
}

7、搭配transform属性实现

transform属性本身是变换的含义，但是它只有显示上的变换，仍然会占用原来元素的大小和位置的文档流，这一点需要额外注意。

例如实现子元素在父元素中隐藏掉的效果，我们可以将子元素进行旋转，将其显示的位置转到父盒外侧，需要显示的时候再将子元素旋转回来即可，这种方式也经常配合动画来使用。

.smallBox{    
    transform: rotate(90deg);
    transform-origin:left bottom;
}
.bigBox {
    overflow:hidden;
}

当然，我们还可以利用缩放来实现，例如缩小元素尺寸到自身的0倍来实现元素的隐藏

.smallBox {    
    transform: scale(0);
}

transform中还有其他的一些变形函数也可以一起动手试试哦，例如translateX()、translateY()、skew()等

今天关于元素显示与隐藏我们就总结这么多，你还有其他的方式吗欢迎一起来交流哦！