顯示 display
display 常見的屬性有:
<td>元素為區塊,沒有特別設定的話,下一個 block 會換行,可以設定 height, width 等屬性。<td>元素為區塊(block),可設定 height, width 等屬性,但是以並排顯示。
inline | 元素並排顯示,元素的大小依其內容決定,無法設定 height, width, margin 等屬性 |
block | 下一個元素會換行,可以設定 height, width 等屬性 |
inline-block | 元素為區塊(block),可以設定width, height 等屬性,但是並排顯示。 |
none | 元素不顯示,也不佔有版面空間。 |
gride | 格線排版 |
flex | 彈性盒子佈局 |
HTML 元素 (tag) 屬性
HTML 元素有些屬於 inline (預設並排顯示) 有些屬於 block (下一個元素自動換行)
inline 屬性 | <span> <b> <a> <img> <i> <iframe> |
block 屬性 | <p> <div> <h1> <h2> <h3>… |
* block 屬性如果沒有特別設定寬,會以寬100%為預設。
block
<style> .ABC { display: block; background-color:#0099cc; width:50px; height:20px; border:1px black solid; } .abc { background-color:#ff9900; width:50px;/*span本身為inline元素,因此無法宣告寬高*/ height:50px; padding:5px; border:1px black solid; } </style>
<span class="abc">a</span><span class="abc">b</span><span class="abc">c</span> <span class="ABC">A</span><span class="ABC">B</span><span class="ABC">C</span>
abc
ABC
上面的例子可以看到,當span 沒有被設定為 display:block; 時,它維持 <span>原有的 inline 屬性,並排顯示。
當 span 使用 display: block 時,他變成區塊屬性,下一個元素自動換行,並且可以設定 height, width
inline
inline 屬性宣告方式和上一段的 block 屬性一樣:當我們把 block 屬性宣告為 display: inline,它們會變成並排顯示。
inline-block
如果我們想要定義一些區塊的寬和高,同時又需要他們並排顯示,就需要使用到 inline-block 屬性。可以參考後面章節:「媒體類別」的例子。
gride 和 flex 由於篇幅較長,由另外兩個章節說明。