CSS--隐藏元素四种方法

前端小云儿

于 2024-03-20 11:16:53 发布

阅读量74

点赞数

分类专栏：前端静态页面以及逻辑文章标签： css

本文链接：https://blog.csdn.net/jieweiwujie/article/details/136870788

版权

前端静态页面以及逻辑专栏收录该内容

148 篇文章 ¥9.90 ¥199.90

订阅专栏

超级会员免费看

本文详细介绍了CSS中四种隐藏元素的方法，包括display:none、visibility:hidden、opacity:0以及使用定位和宽高设置为0，讨论了它们的区别和应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script setup></script>

<template>
  <div class="box">
    <h3>CSS隐藏元素</h3>
    <h4>display--none 元素消失，不占用空间</h4>
    <h4>opacity-- 透明度为0 元素在 占用空间</h4>
    <h4>visibility:hidden --元素消失，但是占据位置，一种不可见状态</h4>
    <h4>position:absolute</h4>
    <h4>clip-path</h4>
  </div>
</template>
<style scoped>
.box {
  border: 1px;
  width: 900px;
  height: 200px;
  margin: 10px;
  padding: 10px;
  line-height: 26px;
}
</style>