顯示屬性

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 一起使用，以隨意顯示或隱藏元素，從而無需實際刪除和重新建立它們。