在本教程中，我们将学习CSS Display and Visibility属性。

可见性

我们使用visibility属性来控制元素的可见性。

为了使元素可见，我们将可见性属性设置为" visible"，为了隐藏元素，我们将属性设置为" hidden"。

注意！尽管该元素是隐藏的，但仍保持其位置。

在以下示例中，我们将第二段的可见性设置为隐藏。

如果我们看下面的结果，我们可以很容易地看出第二段是不可见的，但它仍然占据着它的位置。

p.second {
	visibility : hidden;
}

显示display

我们使用display属性来控制元素的显示和不显示。

display : none

为了隐藏一个元素，我们将其display属性设置为none。
这使元素不可见，也将其从其位置移除。

在以下示例中，我们将第二段的显示设置为无。
在这种情况下，第二段不可见，并从其位置移开。

p.second {
	display : none;
}

这是第一段。

这是第二段。

这是第三段。

display : block

我们将display属性设置为block，以使元素成为块元素。
这意味着该元素将占据整个宽度(从左到右)，并且在元素前后都有新的一行。

单击此处以了解有关块元素的更多信息。

在下面的示例中，我们将span(具有第二类)的display属性设置为block。

默认情况下，span元素是一个内联元素，但是以下样式规则将使其成为一个块元素。

span.second {
	display : block;
}

这是一个段落，在句号停止后开始跨度。
这是一个显示设置为阻止的范围。
段落重新开始。

display : inline

我们将display属性设置为inline，使元素成为inline-element。
这意味着元素将仅占用所需的宽度以适合其内容。

单击此处以了解有关内联元素的更多信息。

在下面的示例中，我们将两个p元素(具有类示例)的display属性设置为内联。

默认情况下，p元素是一个块元素，但是以下样式规则将使其成为行内元素。

p.sampe {
	display : inline;
}

这是显示设置为嵌入式的第一段。

这是第二段显示设置为嵌入式。