是否占据页面位置

• display:none 不占据

• visibility:hidden 占据

• opacity:0 占据

是否触发事件

• display:none 不触发
• visibility:hidden 不触发
• opacity:0 触发

在三个元素上都绑定click点击事件时，只有opacity:0触发了

let box1 = document.querySelector(".box1");
box1.addEventListener("click", function () {
    console.log("box1被点击了"); // 无效
});

let box2 = document.querySelector(".box2");
box2.addEventListener("click", function () {
    console.log("box2被点击了"); // 无效
});

let box3 = document.querySelector(".box3");
box3.addEventListener("click", function () {
    console.log("box3被点击了"); // 有效
});

是否过渡

• display:none 无过渡
• visibility:hidden 无过渡
• opacity:0 过渡

子元素设置可见是否生效

• display:none 不生效
• visibility:hidden 生效
• opacity:0 不生效 为三个元素的子元素设置相应的可见时，在页面中只有visibility设置显示了内容。

/* 为子元素设置可以显示 */

.box1 .child {
    display: block;
}

.box2 .child {
    visibility: visible;
}

.box3 .child {
    opacity: 1;
}