在 CSS 中，display、visibility和opacity是用于控制元素在页面中的可见性和表现方式的属性。尽管它们的目标相似，但它们之间存在着一些重要的区别。本篇博客将详细解释这三者的区别，以便更好地理解它们的作用。
display 属性
display属性用于定义元素在布局中的显示方式。它可以控制元素是否生成盒子、是否占据空间以及如何排列。
常见的 display 属性值包括：
block：元素将生成一个独立的块级盒子，占据一行或多行空间，默认情况下宽度会填充父元素的宽度。inline：元素生成一个内联盒子，不会强制换行，并且宽度随内容自动调整。inline-block：元素生成一个内联块级盒子，类似内联元素，但可以设置宽度、高度等块级元素的属性。none：元素将不会生成盒子，完全不可见，并且不占据空间。
visibility 属性
visibility属性用于定义元素的可见性。它可以控制元素是否可见，但不会影响布局或其他元素的位置。
visibility 属性有两个值：
visible：元素可见，显示在页面上。hidden：元素不可见，但仍会占据空间，不显示在页面上。
opacity 属性
opacity属性用于控制元素的透明度。它可以在 0（完全透明）到 1（完全不透明）之间的值进行设置。
opacity 属性除了会改变元素的透明度外，还会影响元素及其内容的可操作性。给元素设置了 opacity: 0 后，不仅元素本身变为不可见，而且其内容也无法通过鼠标点击或键盘输入进行交互。
区别总结
下面是 display、visibility 和 opacity 的主要区别：
display控制元素的显示方式和如何占据空间，visibility和opacity只控制元素的可见性。display: none会完全移除元素，不会占据空间；visibility: hidden不会移除元素，元素仍占据空间但不可见。display的取值范围更广泛，包括块级、内联、内联块等选项，而visibility和opacity只有可见和隐藏两个选项。opacity控制元素及其内容的透明度，也会影响交互能力，而display和visibility不会影响交互。
在使用这些属性时，我们需要根据具体的情况选择合适的属性来控制元素的可见性和布局，以实现预期的效果。
希望本篇博客对你了解 display、visibility 和 opacity 的区别有所帮助！
本文来自极简博客，作者：幽灵船长，转载请注明原文链接：CSS 中的 display, visibility, opacity 的区别
