在 CSS 中，display 和 visibility 是两个用于控制元素显示和布局的属性，但它们的作用和效果是不同的。以下是它们的主要区别：

1.display

定义：display 属性用于控制元素的显示类型和布局行为。

常见值：

• none：元素不会被渲染，且不占据空间。
• block：元素作为块级元素显示，通常会在新行开始。
• inline：元素作为行内元素显示，不会在新行开始。
• inline-block：元素作为行内块级元素显示，允许设置宽高，但仍在同一行。
• flex、grid 等：用于创建灵活的布局。

2.visibility

定义：visibility 属性用于控制元素的可见性。

常见值：

• visible：元素可见。
• hidden：元素不可见，但仍占据空间。
• collapse：在表格布局中使用，隐藏行或列时不占据空间。

效果：当 visibility 设置为 hidden 时，元素仍然存在于文档流中，但不可见，后续元素不会填补其空间。

示例

<div style="display: none;">这个元素不会显示，也不占据空间。</div>
<div style="visibility: hidden;">这个元素不可见，但仍占据空间。</div>
<div>这个元素是可见的。</div>