CSS 中的 display、visibility 和 opacity 是用来控制元素显示和隐藏的属性，它们有着不同的作用和效果。
display：
display属性用于定义元素应该生成的框的类型。- 它可以控制元素是以什么方式显示，例如
block、inline、inline-block等。 - 通过改变
display属性，可以改变元素在布局中所占的空间和显示方式。
.element {
display: none; /* 元素隐藏，并且不占据布局空间 */
}
.element {
display: block; /* 元素以块级元素显示 */
}
1.visibility：
visibility属性用于设置元素的可见性。- 当设置为
visible时，元素可见；当设置为hidden时，元素不可见，但仍占据布局空间。 - 与
display不同的是，设置为hidden的元素仍然会占据布局空间，只是在页面上不可见。
.element {
visibility: visible; /* 元素可见 */
}
.element {
visibility: hidden; /* 元素不可见，但仍占据布局空间 */
}
1.opacity：
opacity属性用于设置元素的透明度。- 取值范围是 0（完全透明）到 1（完全不透明）之间。
- 改变元素的
opacity可以使元素整体变得更加透明或半透明。
.element {
opacity: 0.5; /* 元素半透明显示 */
}
综合来说，display 主要影响元素在布局中的显示方式，可以完全隐藏元素并且不占据空间；visibility 控制元素的可见性，隐藏元素时仍然占据空间；opacity 控制元素的透明度，改变元素整体的透明程度。在具体应用中，根据需要选择合适的属性来控制元素的显示和隐藏。
到此这篇关于CSS 中的 display、visibility,和opacity 的区别解析的文章就介绍到这了,更多相关CSS display visibility opacity 区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
本文由 华域联盟 原创撰写：华域联盟 » CSS 中的 display、visibility,和opacity 的区别解析
转载请保留出处和原文链接：https://www.cnhackhy.com/157405.htm
