CSS显示属性指定如何在页面上的HTML元素流中呈现HTML元素。 CSS显示属性可以采用以下值之一：

• none
• block
• inline
• inline-block
• grid

以下各节说明了每个CSS显示属性值如何影响HTML元素的呈现。

display : none

CSS显示属性值none将导致HTML元素不在浏览器的页面中显示。此外，它不会占用HTML页面中的任何可见空间。这是一个HTML元素的示例，其CSS显示属性设置为none：

<style>
#myElement { display: none; }
</style>

<div id="myElement">
This DIV element is not displayed
</div>

我们可能想知道为什么要在HTML页面中包含HTML元素，然后将CSS显示属性值none应用于该元素，因此它不可见。在至少两种情况下，这是有道理的，我将在以下各节中进行解释。

第一种情况是我们要根据CSS Media Queries显示或者隐藏HTML元素时。例如，我们可能只想在浏览器窗口超过特定大小时显示特定HTML元素。在较小尺寸的浏览器窗口中，我们可能希望隐藏该HTML元素以更有效地使用可用空间，以避免混乱的用户体验。这是一组CSS媒体查询的示例，结合CSS显示属性可显示和隐藏HTML元素，具体取决于浏览器窗口的宽度：

<style>
@media only screen and (max-width: 600px) {
    #myElement { display: none; }
}
@media only screen and (min-width: 601px) {
    #myElement { display: inline; }
}
</style>

<div id="myElement">
This DIV is only displayed on larger screens
</div>

当浏览器窗口的宽度为600像素或者更小时，此示例将隐藏ID为" myElement"的HTML元素。

第二种情况是使用JavaScript通过将其display属性设置为" none"和其他方式来显示和隐藏HTML元素。这是一个使用JavaScript切换CSS显示属性值的示例：

var element = document.getElementById("myElement");
element.style.display = "none";

display : block

" display" CSS属性的" block"值使HTML元素显示为单独的块。块从新行开始，并且块后的内容也从新行开始。看下面的HTML示例：

<p>
    This text contains 
    <span>display : block</span>
    elements.
</p>

这个例子包含一个span元素。通常将" span"元素呈现为文本流的一部分。这是上面的HTML在呈现时的外观：

该文本包含display：block元素。

现在，让我们将" span"元素的" display" CSS属性设置为" block"：

<p>
    This text contains 
    <span style="display:block">display : block</span>
    elements.
</p>

这是此示例的呈现方式：

该文本包含display：block元素。

如我们所见，" span"现在呈现为一个单独的，垂直断开的块。这是display CSS属性的block值的效果。

display : inline

inline值显示HTML元素作为普通文本流的一部分。看下面的HTML示例：

<div>This text is written </div>
<div>Inside two div elements.</div>

默认情况下，HTMLdiv元素通常呈现为block。因此，两个div元素中的每一个将被渲染为单独的块。看起来是这样的：

这段文字是写的

在两个div元素内。

现在，请注意当我们将两个div元素的display属性设置为inline时会发生什么。这是HTML代码：

<div style="display:inline">This text is written </div>
<div style="display:inline">Inside two div elements.</div>

这是现在在浏览器中呈现两个div元素的方式：

这段文字是写的

在两个div元素内。

注意两个" div"元素现在如何呈现，就像它们都是普通文本流的一部分一样。没有换行符或者其他任何东西。

display : inline-block

display CSS属性的inline-block值使HTML元素像块一样显示，但是作为普通文本流的一部分呈现。那是什么意思？

当我们使用inline值时，我们将无法控制HTML元素的宽度和高度。浏览器根据元素的内容确定。

使用" inline-block"，我们可以再次控制HTML元素的宽度和高度，即使它们作为普通文本流的一部分呈现也是如此。

看下面的HTML示例：

<p>
    This text contains a
    <span style="width: 150px;">span element</span>
    and another
    <span style="width: 150px">span element</span>
    and some text.
</p>

这个例子包含一个带有两个span元素的p元素。跨度元素的宽度是使用CSS属性width设置的。由于默认情况下会使用display：inline来显示span元素，因此会忽略这两个width属性。这是在浏览器中呈现HTML的方式：

该文本包含一个span元素和另一个span元素以及一些文本。

看？ widthCSS属性将被忽略。

但是，请注意当我们将两个" span"元素的" display" CSS属性设置为" inline-block"时会发生什么。首先是HTML代码：

<p>
    This text contains a
    <span style="display: inline-block;
                 width: 150px;">span element</span>
    and another
    <span style="display: inline-block;
                width: 150px">span element</span>
    and some text.
</p>

这是在浏览器中呈现HTML的方式：

该文本包含一个span元素和另一个span元素以及一些文本。

现在我们可以看到两个span元素的宽度为150像素。由于" span"元素内的文本宽度小于150像素，因此" span"元素在文本流中留下了空白。

display : grid网格

CSS显示的" grid"属性值使HTML元素(通常是DIV)的内容在二维网格中布局其元素。 CSS网格布局非常强大，因此描述和理解起来有些复杂。因此，我决定将其排除在本CSS显示教程之外。

HTML元素的默认显示值

不同的HTML元素的display CSS属性具有不同的默认值。在下表中，我列出了一些最常用的HTML元素及其默认值。了解它们的默认"显示"值可能有助于我们了解页面的呈现方式。但是该列表并不完整，因此对于不在此列表中的元素，我们将必须检查CSS / HTML参考。

无论HTML元素的" display" CSS属性值使用什么默认值，都可以通过将" display" CSS属性的值设置为所需值来覆盖它。