css 如何使一个元素消失？

1.让文字消失

text-indent: -9999px

html

<style>
  .text {
    text-indent: -9999px;
  }
</style>
<div class="text">消失的她～～</div>

<style>
  .text {
    text-indent: -9999px;
  }
</style>
<div class="text">消失的她～～</div>

font-size:0

html

<style>
  .text {
    font-size: 0;
  }
</style>
<div class="text">消失的她～～</div>

<style>
  .text {
    font-size: 0;
  }
</style>
<div class="text">消失的她～～</div>

2.视野内隐藏

html

<style>
  .block {
    width: 100px;
    height: 100px;
    background: red;
  }
</style>
<div class="block"></div>

<style>
  .block {
    width: 100px;
    height: 100px;
    background: red;
  }
</style>
<div class="block"></div>

width:0;height:0
transform: scale(0);
transform: rotateY(90deg);
transform: skewX(90deg);
clip-path: inset(50%);
display: none;
visibility:hidden
opacity: 0;

display: none;会完全移除元素，不占用空间；visibility: hidden;元素不可见但仍占用布局空间； opacity: 0;元素保持占位并保持可交互，但完全透明。

3.移动到视野外

margin-top: -9999px;
position: absolute;
transform: translateX(-9999px)