顯示 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 由於篇幅較長，由另外兩個章節說明。