display:none与visibility:hidden区别

display:none彻底隐藏元素且不占空间，visibility:hidden仅隐藏内容但仍保留布局位置。

1、 新建HTML与CSS文件并相互链接。

2、 创建三个span标签用于示例展示。

3、 隐藏元素并释放其占用空间，可通过设置display为none实现。

4、 visibility:hidden 仅让元素不可见，但其占用的空间依然存在。

5、 可用一个div包裹内容，使内部元素全部隐藏。

6、 在需要隐藏元素但保留其空间时，visibility:hidden 依然有其用武之地。

7、 visibility:visible 表示元素可见，会正常显示在页面上。