CSS | 可见性属性

在网页中，作为前端开发工程师，你需要掌握可见性属性。它们可以帮助你控制元素是否可见或隐藏。

display属性

display属性可以决定一个元素如何显示。下面是一些可选的值：

• none：元素将不再占用页面上的空间，完全隐藏。
• block：元素将被显示为块元素，占用整个可用的宽度，默认的display属性值。
• inline：元素将被显示为行内元素，只占用必要的宽度水平排列。
• inline-block：元素将被显示为行内块元素，具有块类型元素的特点，但只占据其宽度范围内的空间。

.hidden {
  display: none;
}

.block {
  display: block;
}

.inline {
  display: inline;
}

.inline-block {
  display: inline-block;
}

visibility属性

visibility属性可以决定元素在页面中是否可见。下面是一些可选的值：

• visible：元素将被显示。
• hidden：元素将隐藏，但仍然占用页面上的空间。
• collapse：当应用于表格行或列元素时，隐藏该行或列，仍保留表格边框的空间。

.visible {
  visibility: visible;
}

.hidden {
  visibility: hidden;
}

.collapse {
  visibility: collapse;
}

opacity属性

opacity属性控制元素的不透明度。数值为0的时候，该元素完全透明，数值为1的时候，该元素完全不透明。

.opacity {
  opacity: 0.5; /* 取值范围为[0, 1] */
}

以上就是可见性属性的介绍，希望可以对你的前端开发工作有所帮助。