这是我参与更文挑战的第12天，活动详情查看更文挑战

页面布局的时候，我们经常需要对元素做些显示隐藏的效果，有的时候我们只是希望元素不可见，有的时候我们又希望元素完全隐藏。根据不同的需求，我们可以使用不同的方法来实现。

隐藏不占位类

1、display

隐藏、不占位

display：none

常用的元素隐藏方法。他不但可以隐藏元素，而且还可以让元素在页面上不在占位；

但是它也可能影响到页面一些动画效果设置。

隐藏、不占位

<div hidden>隐藏</div>

设置hidden属性，会应用浏览器默认样式[hidden] {display: none;}，所以注意不要和display属性同时使用。

隐藏、不占位

  height: 0;
  padding: 0;
  overflow: hidden;

可以通过使用最小化其尺寸被隐藏width，height，padding，border-width和/或font-size。还需多设置一个overflow: hidden;以确保内容不会溢出。

隐藏、不占位

position: absolute;
left: -999px;

利用position属性，设置较大的值，将元素移除屏幕以实现隐藏的效果。

隐藏、占位

 opacity: 0;

通过设置opacity的值实现隐藏元素的想过，但还是让元素不可见，元素在页面上依然占位

隐藏、占位

 transform: scale(0);
 或
 transform: translate(-999px, 0);

通过transform属性的平移（移动）、缩放、旋转或倾斜元素等方式，来对元素进行一个隐藏

隐藏、占位

 visibility: hidden;

visibility属性可以设置为visible或hidden以显示和隐藏元素

隐藏、占位

  color: rgba(0,0,0,0);
  background-color: rgba(0,0,0,0);

可以利用rgba设置元素的透明度为0，从而达到隐藏元素的效果

隐藏、占位

clip-path: circle(0);

clip-path属性会创建一个裁剪区域，用于确定元素的哪些部分可见。使用clip-path: circle(0)可以达到将元素隐藏的效果。

小可爱看完就点个赞再走吧！🤞🤞🤞