显示属性

display CSS 属性是控制 HTML 文档的布局和流程的基础。大多数元素都具有 block 或 inline 的默认 display 值（尽管某些元素具有其他默认值）。

排队

inline 元素只占用所需的宽度。它与其他相同类型的元素水平堆叠，并且可能不包含其他非内联元素。

<span>This is some <b>bolded</b> text!</span>

如上所示，两个 inline 元素 <span> 和 <b> 是内联的（因此得名）并且不会破坏文本的流动。

块

block 元素占据其父元素的最大可用宽度。它以新行开头，与 inline 元素相反，它不限制它可能包含的元素类型。

<div>Hello world!</div><div>This is an example!</div>

div 元素默认为块级，如上所示，两个 block 元素垂直堆叠，与 inline 元素不同，文本流动中断。

内联块

inline-block 值为我们提供了两全其美：它将元素与文本流混合在一起，同时允许我们使用 padding，margin，height 和类似的属性，这些属性对 inline 元素没有明显影响。

具有此显示值的元素就像它们是常规文本一样，因此受控制文本流的规则（如 text-align）的影响。默认情况下，它们也缩小到可以容纳其内容的最小尺寸。

<!--Inline: unordered list-->
<style>
li {
    display : inline;
    background : lightblue;
    padding:10px;

    border-width:2px;
    border-color:black;
    border-style:solid;
    }
</style>    

<ul>
<li>First Element </li>
<li>Second Element </li>
<li>Third Element </li>
</ul>

<!--block: unordered list-->
<style>
li {
    display : block;
    background : lightblue;
    padding:10px;

    border-width:2px;
    border-color:black;
    border-style:solid;
    }
</style>    

<ul>
<li>First Element </li>
<li>Second Element </li>
<li>Third Element </li>
</ul>

<!--Inline-block: unordered list-->
<style>
li {
    display : inline-block;
    background : lightblue;
    padding:10px; 

    border-width:2px;
    border-color:black;
    border-style:solid;
    }

</style>    

<ul>
<li>First Element </li>
<li>Second Element </li>
<li>Third Element </li>
</ul>

没有

根本不显示为其 display 属性赋予 none 值的元素。

例如，让我们创建一个 id 为 myDiv 的 div 元素：

<div id="myDiv"></div>

现在可以将此标记为以下 CSS 规则不显示：

#myDiv {
    display: none;
}

当元素设置为 display:none; 时，浏览器会忽略该特定元素的所有其他布局属性（position 和 float）。不会为该元素呈现任何框，并且它在 html 中的存在不会影响后续元素的位置。

请注意，这与将 visibility 属性设置为 hidden 不同。为元素设置 visibility: hidden; 不会在页面上显示元素，但元素仍会占用渲染过程中的空间，就像它可见一样。因此，这将影响页面上显示以下元素的方式。

display 属性的 none 值通常与 JavaScript 一起使用，以随意显示或隐藏元素，从而无需实际删除和重新创建它们。