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;」,依然還是可以透過 floatposition 屬性強制將元素顯示為行。

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 的效果。

類似的主題
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012 Englsih version
PHP Smarty MySQL JQuery Apache W3C