display和visibility在CSS中都是用来控制元素显示和隐藏的属性，但它们之间存在一些关键的区别。以下是这两个属性的区别以及示例介绍：
### 1. 显示与隐藏的方式
- **display**:
- 当设置`display: none;`时，元素会从文档布局中完全消失，不会占据任何空间，就像元素从未存在过一样。
- 反之，`display: block;`、`display: inline;`、`display: inline-block;`等则分别控制元素以块级、行级或行内块级的方式显示。
- **visibility**:
- 当设置`visibility: hidden;`时，元素虽然不可见，但仍然占据原来的空间，不影响其他元素的布局。
- 设置为`visibility: visible;`时，元素则正常显示。
### 2. 对文档布局的影响
- **display**: 直接影响元素的布局。当元素被设置为`display: none;`时，其占用的空间会被其他元素填补，仿佛该元素从未存在。
- **visibility**: 不影响元素的布局位置。即使元素不可见，其占据的空间仍然保留。
### 3. 示例介绍
假设我们有以下HTML结构：
<div id="example1" style="width: 100px; height: 100px; background-color: red;">Display Example</div>
<div id="example2" style="width: 100px; height: 100px; background-color: blue;">Visibility Example</div>
接下来，我们通过JavaScript动态地改变这两个元素的`display`和`visibility`属性：
// 隐藏display元素
document.getElementById('example1').style.display = 'none';
// 隐藏visibility元素，但保留其空间
document.getElementById('example2').style.visibility = 'hidden';
- **结果**：
- `example1`元素（红色方块）将完全从页面上消失，不会占据任何空间，其后的元素会填补其原本的空间。
- `example2`元素（蓝色方块）虽然不可见，但其原本的空间仍然保留，页面上的其他元素不会移动到其位置。
### 4. 总结
- **display**适合用于需要彻底从文档布局中移除元素的情况。
- **visibility**适合用于需要保留元素空间但暂时隐藏元素内容的场景。
以上信息基于CSS的`display`和`visibility`属性的标准行为，适用于大多数现代浏览器。