CSS display 屬性

CSS display 屬性是讓網頁設計師可以自由設定網頁元素的顯示類型，HTML 元素本身的顯示類型就是預設的，而且每一種不同的元素都會有自己的預設值，常見的顯示類型有「區塊元素」與「內行元素」，預設為 display:block 的為「區塊元素」，而預設為 display:inline 的則是內行元素，這兩者的差別在於顯示所占用的空間與型態，在後續的說明與範例中會一一呈現，CSS 允許網頁設計師自由的修改 HTML 元素預設的這些顯示類型，透過的就是 CSS display 屬性。

CSS display 屬性的語法

display: 顯示參數;

CSS display 屬性允許的顯示參數其實非常多，不過最常用到的是 none、block 與 inline 這三項，其中 none 是將元素調整為＂不顯示＂的效果，block 是顯示為區塊元素，inline 則是顯示為內行元素，其它還包含比較少用到的 list-item、table 與 flex 等。

關於 display:block 與 display:inline 的差別

display:block;　//元素的顯示型態被設定為區塊元素。
display:inline;　//元素的顯示型態被設定為內行元素。

補充：儘管我們將元素設定為「display:block;」，依然還是可以透過 float 或 position 屬性強制將元素顯示為行。

CSS display 屬性範例一、display:none;

這段文字會顯示+<span style="display:none;">這一段的文字會消失</span>+這段文字會顯示

範例呈現的效果

這段文字會顯示++這段文字會顯示

我們利用了「display:none;」的效果，讓 span 標籤內的文字消失。

CSS display 屬性範例二、display:block;

這是一般的文字+<span style="background-color:#dddddd;">這是一般的文字</span>+這是一般的文字
<br><br>
這是一般的文字+<span style="display:block;background-color:#dddddd;">這段文字是區塊元素</span>+這是一般的文字

範例呈現的效果

這是一般的文字+這是一般的文字+這是一般的文字

這是一般的文字+這段文字是區塊元素+這是一般的文字

範例二中，我們準備了兩組有 span 標籤特別標注文字，第一段並未設定 CSS display 屬性，所以是預設值顯示為一整行，不過第二組就被設定為「display:block;」，意思是 span 標籤被強制改為區塊元素，一次會占用掉一整行的空間，所以就變成範例呈現的效果那樣。

CSS display 屬性範例三、display:inline;

區塊外的文字+<div style="background-color:#dddddd;">這是 DIV 區塊的預設值</div>+區塊外的文字
<br><br>
區塊外的文字+<div style="display:inline;background-color:#dddddd;">這個 DIV 區塊被設定為內行元素</div>+區塊外的文字

範例呈現的效果

區塊外的文字+

這是 DIV 區塊的預設值

+區塊外的文字

區塊外的文字+

這個 DIV 區塊被設定為內行元素

+區塊外的文字

範例三採用了 DIV 區塊來表現 display:inline 的效果，因為 DIV 區塊本身的預設值就是＂區塊元素＂，所以不用額外設定 CSS display 就能顯示為區塊，一次占用掉一整行的空間，如範例的呈現效果那樣，程式碼中的一行文字變成三行，因為中間是 DIV 區塊，接著我們用 display 的 inline 參數值，將 DIV 區塊的屬性修改為內行元素，所以最終的結果反而是不會換行，這就是 CSS display:inline 的效果。

類似的主題