在页面上隐藏元素的方法

在页面上隐藏元素的方法有哪些？

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

一、全局属性  hidden

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

这个方法隐藏元素不占位置。

二、display：none

这个属性会让元素在页面中消失，不占据实际的空间。

三、visible: hidden

.box {
    visible: hidden;
}

visible 属性规定元素是否可见，即使不可见的元素也会占据页面上的空间。使用display属性来创建不占据空间的不可见元素。

四、position定位

1、通过 z-index

.box {
    z-index: -9999;
}

让元素放到其他元素的最底层。

2、通过为止或 margin

left / right / top / bottom : 9999px / -9999px;

让元素在可视区域外。

3、设置透明度

.box {
    position: absolute;
    opacity: 0;
}

4、使用transform

必须使用 position 配合，让元素托表，不然还会占据空间。

scale缩放
.box {
    position: absolute;
    transform: scale(0);
    transform: translateX(-200%)
}