CSS 顯示

display 屬性控制元素生成的框的型別。

CSS 顯示屬性

CSS 規範定義了所有元素的預設顯示值，例如， <div> 元素呈現為塊，而 <span> 元素以內聯方式顯示。

更改預設顯示值

覆蓋元素的預設顯示值是 display 屬性的重要含義。例如，更改要顯示為塊級元素的內聯級元素，或更改要顯示為內聯級元素的塊級元素。

注意： CSS display 屬性是所有 CSS 中最強大和最有用的屬性之一。它對於建立以不同方式檢視但仍遵循 Web 標準的網頁非常有用。

以下部分介紹了最常用的 CSS 顯示值。

顯示塊

display 屬性的 block 值強制元素的行為類似於塊級元素，如 <div> 或 <p> 元素。以下示例中的樣式規則將 <span> 和 <a> 元素顯示為塊級元素：

注意： 更改元素的顯示型別只會更改元素的顯示行為，而不是元素的型別。例如，設定為的內聯元素 display: block; 不允許巢狀在其中的塊元素。

顯示內聯

display 屬性的 inline 值使元素的行為就像它是一個內聯級元素，如 <span> 或 <a> 元素。以下示例中的樣式規則將 <p> 和 <li> 元素顯示為內聯級元素：

span {
    display: block;
}
a {
    display: block;
}

顯示內聯塊

display 屬性的 inline-block 值使元素生成一個塊框，該塊框將與周圍內容一起流動，即與相鄰內容在同一行中。以下樣式規則將 <div> 元素和 <span> 元素顯示為內聯塊：

顯示無

該值 none 只會導致元素根本不生成任何框。子元素也不生成任何框，即使它們的 display 屬性設定為 none 以外的其他元素。呈現文件，就好像文件樹中不存在該元素一樣。

p {
    display: inline;
}
ul li {
    display: inline;
}

注： display 屬性的值 none 不會建立一個無形的盒子-它創造沒有框的。檢視內部可見性與顯示部分的實時演示。