怎么让一个div消失在视野里

怎么让一个div消失在视野里

视野内隐藏

1.设置高度宽度为0

div {
    height: 0;
    width: 0;
}

2.设置透明度为0

div {
    opacity: 0;
}

3.设置display，让其消失在渲染树中

div {
    display: none;
}

4.设置visiblity来改变可见

div {
    visibility: hidden;
}

5.缩放

div {
    transform: scale(0);
}

6.旋转

div {
    transform: rotateX(90deg);  /*X/Y均可*/
}
div {
    transform: skewX(90deg);  /*X/Y均可*/
}

2、3、4三种方案的区别

• display: none;直接将元素块在渲染树中删除，不进行渲染，后面的div会补上这一部分位置
• visibility: hidden;只是将元素隐藏，但是所在位置还是被占着的，不会影响整体布局
• opacity: 0;设置透明度为0，实际元素还在那个位置，而且可点击
• vue中的v-if和v-show的区别和display与visiblity的区别一样

移动到视野外

1.负margin

div {
    margin-top: -9999px;  /*top/right/bottom/left均可*/
}

2.绝对/相对定位

div {
    poititon: absolute;
    top:-100%;  /*top/right/bottom/left均可*/
}

3.transform

div {
    transform: translateX(-9999px);  /*X/Y均可*/
}

4.z-index

div {
    poititon: absolute;
    z-index: -1
}