CSS display

Kimser
528 阅读5分钟

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

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应用到它上，因此它不可见。这至少有2种情况是有意义的——我会在以下章节中解释。

第一种情况是，根据CSS媒体查询，您想显示或隐藏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通过将HTML元素的显示属性设置为none和其他东西来显示和隐藏HTML元素。以下是使用JavaScript切换CSS显示属性值的示例：

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

display : block

displayCSS属性的block值使HTML元素显示为单独的块。块从新行开始，块后的内容也从新行开始。看看这个HTML示例：

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

此示例包含span元素。span元素通常作为文本流的一部分呈现。上述HTML渲染时如下所示：

此文本包含显示：块元素。

现在，让我们为span元素设置displayCSS属性以block：

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

以下是此示例的呈现方式：

此文本包含显示：块元素。

如您所见，span现在呈现为一个单独的垂直断开的块。这是displayCSS属性的block值的影响。

display : inline

inline值显示HTML元素作为正常文本流的一部分。看看这个HTML示例：

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

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

这篇文章是写好的

在两个div元素中。

现在，请注意，当我们为两个div元素将displayCSS属性设置为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

displayCSS属性的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>

这个例子包含一个' p '元素和两个' span '元素。' span '元素的宽度是使用' width ' CSS属性设置的。由于默认情况下' span '元素是使用' display: inline '来呈现的，所以两个' width ' CSS属性被忽略。下面是HTML在浏览器中的呈现方式:

此文本包含一个跨度元素和另一个跨度元素以及一些文本。

看到了吗？widthCSS属性将被忽略。

但是，请注意，当我们为两个span元素将displayCSS属性设置为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元素的宽度为150像素。由于span元素内的文本宽度小于150像素，span元素在文本流中留下了白色空白。

display : grid

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

HTML元素的默认显示值

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

显示值具有此默认值的HTML元素
blockdiv, p,table
inlinespan, b, i, strong,em
inline-blockimg

无论HTML元素对其displayCSS属性值使用什么默认值，您始终可以通过将displayCSS属性的值设置为所需的值来覆盖它。

avatar
文章
阅读
粉丝