网络技术问题 | CSS 测验 |第一组 |问题 13

问题描述

在 CSS 中， display 属性的 none 和 visibility 属性的 hidden 有什么不同？

回答

display: none 和 visibility: hidden 都可以隐藏元素，但是它们之间有一些重要的区别。

1. display: none 会使元素完全从渲染树中消失，相当于不占据任何空间，而 visibility: hidden 仅仅是将元素的可见性设置为隐藏，元素仍然占据原来的空间。
2. display: none 对性能的影响更高，因为要将元素从渲染树中移除，而 visibility: hidden 只是单纯的变化元素的可见性。
3. display: none 会使元素的 display 计算值变为 none，而 visibility: hidden 不会改变元素的 display 计算值。

因此，如果想要彻底的隐藏元素，使它不占据渲染树中的空间并且不影响性能，可以使用 display: none。如果想要隐藏元素但是保留它的空间和避免对性能产生影响，可以使用 visibility: hidden。

## 回答

`display: none` 和 `visibility: hidden` 都可以隐藏元素，但是它们之间有一些重要的区别。

1. `display: none` 会使元素完全从渲染树中消失，相当于不占据任何空间，而 `visibility: hidden` 仅仅是将元素的可见性设置为隐藏，元素仍然占据原来的空间。
2. `display: none` 对性能的影响更高，因为要将元素从渲染树中移除，而 `visibility: hidden` 只是单纯的变化元素的可见性。
3. `display: none` 会使元素的 `display` 计算值变为 `none`，而 `visibility: hidden` 不会改变元素的 `display` 计算值。

因此，如果想要彻底的隐藏元素，使它不占据渲染树中的空间并且不影响性能，可以使用 `display: none`。如果想要隐藏元素但是保留它的空间和避免对性能产生影响，可以使用 `visibility: hidden`。