CSS中的`visibility: hidden;`和`display: none;`都可以用来隐藏元素，但它们的工作方式和适用情况有所不同。

### 1. 占位差异

**`visibility: hidden;`** 不显示元素，但仍会占据页面上的空间。元素隐藏后，其占据的空间依然存在，这意味着其他元素的位置不会因为这个元素的隐藏而发生改变。

**例子：**
假设有一个列表，列表中的一个项目我们设置了`visibility: hidden;`，这个项目虽然看不见了，但列表的其他项目位置不会改变，仍然保持原来的间距。

```html
<ul>
  <li>项目1</li>
  <li style="visibility: hidden;">项目2</li>
  <li>项目3</li>
</ul>
```

**`display: none;`** 不仅不显示元素，而且元素不会占据任何空间。元素完全从文档流中消失，相当于这个元素从HTML中被删除了，因此会影响到布局。

**例子：**
同样是上面的列表，如果将某个项目设置`display: none;`，那么这个项目不仅看不见，其占据的空间也完全消失，列表的其他项目会相应地挨得更紧。

```html
<ul>
  <li>项目1</li>
  <li style="display: none;">项目2</li>
  <li>项目3</li>
</ul>
```

### 2. 对子元素的影响

设置为`visibility: hidden;`的元素，其子元素可以通过设置`visibility: visible;`来显示。这是因为`visibility`属性是可以继承的。

**例子：**
```html
<div style="visibility: hidden;">
  <p>这段文字不可见。</p>
  <p style="visibility: visible;">这段文字可见。</p>
</div>
```
在上例中，尽管父元素被设置为隐藏，子元素依然可以通过设置`visibility: visible;`来显示。

而`display: none;`对子元素的影响是完全的，即便子元素设置了`display: block;`或其他显示属性，也无法显示。

### 3. 性能考量

`display: none;`在性能上通常比`visibility: hidden;`更高效，因为后者仍需要浏览器进行布局计算，只是不进行渲染。在不需要频繁切换元素显示状态的情况下，`display: none;`是更好的选择。

综上所述，选择使用`visibility: hidden;`还是`display: none;`取决于具体需求，是否需要元素保持在文档流中，以及是否需要对子元素进行独立的显示控制。

Css visibility:hidden 和 display :none 之间的区别是什么？

1个答案

1. 占位差异

2. 对子元素的影响

3. 性能考量

你的答案