从不重复论述，CSS实现隐藏元素的方法

display:none

display: none;

display:none 直接上代码，给元素设置display:none;以后，元素就会隐藏，并且原有的空间也会被释放掉。意思就是隐藏之后就不占位置了。

盒子1就隐藏了，并且它原有的位置也被释放了，此时盒子2就会跑上来。

visibility:hidden

visibility: hidden;

visibility:hidden 只是单纯的隐藏了元素，但是元素的位置依然没有变，还是在原来地方，只是我们看不到它了而已。

盒子1就隐藏了，但是它原来位置还在，盒2不能跑上来，所以直接挤压了盒3，而盒子3挤压了盒4。

overflow:hidden

overflow: hidden;

overflow:hidden 是设置元素内容区的溢出行为，意思就是内容撑破元素外框，是往哪里溢出。

Box1 撑破了父元素外框，溢出部分直接被裁剪掉了。

clip:rect(0 0 0 0)

clip: rect(0px, 0px, 0px, 0px);

clip:rect()方法可以给元素裁剪出指定形状的区域，默认参数0 0 0 0 是什么都没有裁剪出来，所以元素就相当于被隐藏掉了。

盒1 又被裁剪成了一块空白区域，相当于隐藏。

mask:none

mask: none;

mask:none 的作用是给元素增加一层遮罩，让元素隐藏在遮罩下面。而none的意思是没有遮罩，所以相当于元素被隐藏起来了。

盒1又被隐藏了。

transform:translate()

transform: translate(-9999px, -9999px);

transform:translate()方法可以对元素进行平移，-9999px, -9999px 是把元素平移到左上角看不见的地方。

盒1又被挤出屏幕左上角了。

position:fixed + z-index:-9999

position: fixed;
z-index: -9999;

position:fixed 可以把元素固定在某个位置，z-index 可以设置元素的层叠顺序，-9999 是把元素的层叠顺序设置到最低，这样元素就会被挤到最下面，看不到。

盒1 又被压到屏幕最下面了。

opacity:0

opacity: 0;

opacity:0 可以设置元素的透明度，0是完全透明。

盒1被设置成了透明的，相当于隐藏了。

aria-hidden=true

aria-hidden: true;

aria-hidden 是一个辅助功能属性，可以告诉屏幕阅读器元素是隐藏的。

盒1被aria-hidden设置为隐藏的，但是肉眼还是可以看到。