css隐藏元素方式

最新推荐文章于 2024-07-24 06:54:05 发布

yp2294188167

最新推荐文章于 2024-07-24 06:54:05 发布

阅读量368

点赞数

文章标签：隐藏方式css

本文链接：https://blog.csdn.net/yp2294188167/article/details/102987924

版权

本文深入探讨了CSS中四种不同的元素隐藏方法：display:none、height:0、visibility:hidden及DOM元素删除与添加。每种方法都有其独特的应用场景和效果，如是否占据页面空间、子元素是否可见等。通过实例代码，读者可以直观理解这些技巧及其区别。

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

先附上css代码
.box {
width: 100px;
height: 100px;
background-color: red;
}

    /* 隐藏元素 */
    .hidden {
        width: 100px;
        height: 100px;
        background-color: #bfa;
        visibility: hidden;
        /* display: none; */
    }

    .tab {
        width: 200px;
        height: 30px;
        padding: 5px 10px;
        background-color: black;
        color: #f1f1f1;
    }

    #view {
        width: 200px;
        height: 100px;
        margin-top: 14px;
        background-color: aqua;
        /* 初始化样式：为隐藏状态 */
        display: none;
    }
    /* 当鼠标移动到.tab 元素时，触发.tab子元素#view的样式 */
    .tab:hover>#view {
        /* 当鼠标移到父元素上时，显示元素#view */
        display: block;
    }
    .box:hover>.xxx{
        height: 100px;
    }
    .xxx{
        width: 100px;
        height: 0;
        background-color: #bfa;
    }
    .x{
        width: 100px;
        height: 100px;
        background-color: aqua;
    }

**然后附上html代码 **

鼠标放上来有惊喜

我是显示隐藏内容

</div>
<div class="hidden"></div>
<div class="box">
    <div class="xxx"></div>
</div>
<div class="x"></div>
看的懂就行，看不到就看下面
  css隐藏方式：
    1.display:none  反： 显示：display：block
    2.height:0      反： 显示：height：设置高度
    3.visibility: hidden  效果隐藏，在浏览器中占位置
    4.删除dom元素，显示的在添加(理论深)

    区别：
    display:none 是彻底隐藏，子元素也隐藏
    visibility:hidden 样式隐藏，单占据位置
    height:0    当前元素隐藏，子元素不隐藏，内容溢出   可以结合overflow:hidden完成隐藏效果