css如何隐藏一个元素

104 阅读1分钟
<div class="element"></div>

设置display

.element {
  display: none;
}

隐藏元素,不占空间

设置position

.element {
  position: absolute;
  left: -99999999px;
}

将position属性的值设置为absolute或fixed,并将元素移出可见区域

设置position、clip-path

.element {
    position: absolute;
    clip-path: circle(0);
}

设置position为absolute,clip-path剪切方式为全部剪切

设置opacity

.element {
    opacity: 0;
}

将元素设置为透明,但是仍然占据空间

设置visibility

.element {
    visibility: hidden;
}

将visibility属性的值设置为hidden,元素将不可见,但仍然占据空间

设置transform

.element {
    transform: translate(-999999px, -999999px)
}

设置transform的translate将元素移出可见区域

.element {
    transform: scale(0)
}

设置transform的scale将元素缩小至0

设置width、height

.element {
    width: 0;
    height: 0;
}

将元素的宽、高设为0,元素不可见