CSS Display(显示) 与 Visibility（可见性）

在CSS中，display 和 visibility 是用来控制元素在页面中的显示方式和可见性的两个重要属性。在本章节中，我们将学习如何使用这两个属性来控制元素的显示和隐藏。

Display属性

display 属性用来控制元素的显示方式。常见的取值有：

• block：元素将被显示为块级元素，即元素会在新的一行开始，并且会占据整个父元素的宽度。
• inline：元素将被显示为内联元素，即元素会在同一行显示，并且只占据它本身的宽度。
• inline-block：元素将被显示为内联块级元素，即元素会在同一行显示，但是可以设置宽度和高度。
• none：元素将被隐藏，不占据任何空间。

示例代码：

// www.javascriptcn.com code example
.block {
  display: block;
}

.inline {
  display: inline;
}

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

.hidden {
  display: none;
}

Visibility属性

visibility 属性用来控制元素的可见性。常见的取值有：

• visible：元素是可见的。
• hidden：元素是隐藏的，但是仍占据空间。
• collapse：当在表格中使用时，元素会被隐藏，但是表格的布局不会受到影响。

示例代码：

// www.javascriptcn.com code example
.visible {
  visibility: visible;
}

.hidden {
  visibility: hidden;
}

.collapse {
  visibility: collapse;
}

通过合理地使用 display 和 visibility 属性，我们可以控制页面中元素的显示方式和可见性，从而实现更加灵活和美观的页面布局。