显示属性

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

排队

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

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

StackOverflow 文档

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

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

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

StackOverflow 文档

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

内联块

inline-block 值为我们提供了两全其美:它将元素与文本流混合在一起,同时允许我们使用 paddingmarginheight 和类似的属性,这些属性对 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>

StackOverflow 文档

<!--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>

StackOverflow 文档

<!--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>

StackOverflow 文档

没有

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

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

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

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

#myDiv {
    display: none;
}

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

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

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