CSS visibility 和 display 的区别

visibility 和 display 是 CSS 中两个用于控制元素呈现方式的属性，但是它们之间有显著的不同：

• visibility 属性：它可以让元素变为可见或不可见，但不影响布局，即不占据任何空间。当设置为 hidden 时，元素会被隐藏，但是它的位置与大小仍会占用页面的空间。

div {
    width: 100vw;
    height: 50vh;
    visibility: hidden;
}

• display 属性：它控制元素的呈现方式是作为块级元素还是行内元素，或者是一个定义了特殊呈现方式的元素，如表格单元格等。当设置为 none 时，元素完全从页面中消失，不占用任何空间。

div {
    width: 100vw;
    height: 50vh;
    display: none;
}

简单的说，visibility 控制的是元素的可见性，而 display 控制的是元素的呈现方式。