CSS中的visibility与display属性的区别与应用
欢迎来到CSS小课堂！今天我们要聊的是两个非常常见的CSS属性：visibility和display。这两个属性虽然都能控制元素的显示状态，但它们的行为和应用场景却大不相同。让我们一起揭开它们的神秘面纱吧！
一、visibility vs display：基本概念
首先，我们来简单了解一下这两个属性的基本作用：
-
visibility：这个属性控制元素是否可见，但它不会影响页面的布局。也就是说，即使你把一个元素设置为不可见，它仍然会占据页面上的空间。 -
display：这个属性则更加“霸道”一些，它不仅控制元素的可见性，还会直接影响页面的布局。如果你把一个元素的display设置为none，它不仅会消失，还会从页面布局中完全移除，其他元素会自动填补它的位置。
二、visibility的用法
1. visibility: visible
这是visibility的默认值，表示元素是可见的。没什么好说的，就是正常显示嘛！
.element {
visibility: visible;
}2. visibility: hidden
当我们将visibility设置为hidden时，元素会变得不可见，但它仍然会占据页面上的空间。你可以把它想象成一个“隐形人”，虽然你看不到它，但它依然站在那里，挡住了你的去路。
.hidden-element {
visibility: hidden;
}3. visibility: collapse（仅适用于表格元素）
对于表格元素（如<table>、<tr>、<td>等），visibility: collapse的作用类似于hidden，但它不会像hidden那样保留空白区域。相反，它会让表格行或列“塌陷”，就像从来没有存在过一样。
.collapsed-row {
visibility: collapse;
}三、display的用法
1. display: block
将元素设置为块级元素，这意味着它会独占一行，并且可以设置宽度和高度。常见的块级元素有<div>、<p>、<h1>等。
.block-element {
display: block;
}2. display: inline
将元素设置为内联元素，这意味着它不会独占一行，而是与其他内联元素在同一行显示。常见的内联元素有<span>、<a>、<img>等。
.inline-element {
display: inline;
}3. display: inline-block
这是一个折中的选择，元素既具有内联元素的特点（不会独占一行），又具有块级元素的特点（可以设置宽度和高度）。非常适合用来创建按钮或其他需要自定义尺寸的内联元素。
.inline-block-element {
display: inline-block;
}4. display: none
这是display最常用的一个值。当你将display设置为none时，元素不仅会消失，还会从页面布局中完全移除。其他元素会自动填补它的位置，就好像它从未存在过一样。
.none-element {
display: none;
}四、visibility与display的区别
为了更直观地理解这两个属性的区别，我们可以用一个表格来对比它们的行为：
| 属性 | 是否可见 | 是否占据空间 | 对页面布局的影响 |
|---|---|---|---|
visibility: visible |
可见 | 占据空间 | 无影响 |
visibility: hidden |
不可见 | 占据空间 | 无影响 |
visibility: collapse |
不可见 | 不占据空间 | 表格行/列塌陷 |
display: block |
可见 | 占据空间 | 独占一行 |
display: inline |
可见 | 不占据空间 | 内联显示 |
display: inline-block |
可见 | 占据空间 | 内联显示，可设宽高 |
display: none |
不可见 | 不占据空间 | 完全移除布局 |
五、实际应用场景
1. 使用visibility实现“渐显效果”
visibility的一个常见应用场景是配合JavaScript或CSS动画实现元素的“渐显”或“渐隐”效果。由于visibility不会改变页面布局，因此在切换可见性时，页面不会发生跳动。
.fade-in {
visibility: visible;
opacity: 1;
transition: opacity 0.5s ease-in-out;
}
.fade-out {
visibility: hidden;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}2. 使用display实现“懒加载”
display: none常用于懒加载场景。例如，在一个图片库中，你可能希望只加载用户当前能看到的图片，而隐藏的图片暂时不加载。通过将未加载的图片设置为display: none，你可以确保它们不会占用资源，直到用户滚动到它们的位置。
.lazy-image {
display: none;
}
.lazy-image.visible {
display: block;
}3. 使用visibility: collapse优化表格布局
在处理复杂的表格时，visibility: collapse可以帮助你更高效地隐藏某些行或列，而不会导致表格布局的混乱。相比display: none，collapse更适合用于表格元素，因为它不会破坏表格的结构。
.collapsible-row {
visibility: collapse;
}六、总结
好了，今天的CSS小课堂就到这里啦！通过今天的讲解，相信大家对visibility和display的区别已经有了清晰的认识。简单来说：
- 如果你只是想让元素暂时不可见，但又不想影响页面布局，那么
visibility: hidden是个不错的选择。 - 如果你想要彻底移除某个元素，并且希望其他元素能够自动填补它的位置，那么
display: none才是你的最佳拍档。
当然，CSS的世界里还有很多其他的属性和技巧等着我们去探索。希望今天的分享能帮助你在未来的开发中更好地运用这两个属性，写出更优雅的代码！
如果你有任何问题，欢迎随时提问哦！下次再见，祝你编码愉快！
