前言

一问到css如何隐藏一个元素，那我们首先反应的就是display:none拉，其实是不全面的，那么还有哪些方法咧，我们来探讨一下

隐藏方法

主要有三大类

• 完全隐藏：元素从渲染树中消失，不占据空间。
• 视觉上的隐藏：屏幕中不可见，占据空间。
• 语义上的隐藏：读屏软件不可读，但正常占据空间。

完全隐藏

• display: none；会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击
• hidden(html5 新增的属性)

<div hidden></div>
<div class="hide"></div>

<style>
.hide{
    display: none;
}
</style>

视觉上隐藏

• opacity: 0； 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击
• visibility: hidden; 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见
• 绝对定位(移除屏幕)
• margin(移出屏幕)
• 宽高为0 + overflow:hidden

<div class="box">
    <div class="hide"></div>
</div>

<style>

/*opcity*/
.hide{
    opacity: 0;
}

/* visibility */
.hide{
    visibility: hidden;
}

/*绝对定位*/
.box{
    position: relative;
}
.hide{
    position: absolute;
    left: -9999px;
    top: -9999px;
}

/*margin*/
.hide{
    margin: -9999px;
}

/*宽高为0*/
.hide{
    width: 0;
    height: 0;
    overflow: hidden;
}


</style>

语义上隐藏

• aria-hidden: true 使读屏软件不可读，但是元素仍然占据空间并且可见

<div aria-hidden="true"></div>

总结

以上有多种可以实现隐藏的效果，每一种都有一点点差别，我们可以根据需求来选择~