CSS顯示模式差異(1):
在HTML中我們依照版面顯示方式，將標籤分為三種類型，
1.區塊元素(block):例如: h1~h6,div,section,header,p,br,li,ul,ol...
等等，特性如下:
特性1:造成換行
特性2:可以設定width與height
2. 行內文字元素(inline):例如: a,span,label,:before,:after，特性如下:
特性1:不會造成換行
特性2:無法設定寬度與高度
特性3:中間會有空格(非留白)，如果我們使用chrome除錯的話，會發現中間的空白。

3.行內區塊元素(inline-block):例如: img,button,input,textarea,select，適合小版型想要排在一起，會有以下 幾個特性:
特性1:不會造成換行。
特性2:可以設定寬度與高度。
特性3:中間會有空格(非留白)，如果我們使用chrome除錯的話，會發現中間的空白。

雖然HTML會有預設標籤屬於哪一種元素，但是我們可以透過CSS選擇器來改變它們的預設屬性。假設我們有一段div 要將其改為block
HTML設定如下:

<div class="display-box" d-inline> div標籤</div>

CSS可以這樣寫

.d- inline {
    display: inline;
}

結果你會發現，原本會換行的div標籤就不會換行顯示，

同樣的在我們也可以更改其他標籤為inline-block 及 block。
CSS顯示模式差異(2):
在大版行區塊的切割我們不建議用inline-block來做，原因是因為inline-block中間會有難以消除的空格，空格也會算pixel，因此會造成版面在計算上的困難，導致跑版。
建議的做法如下，使用display:flex;

.row {
    border: 1px solid black;
    display: flex;
    flex-wrap: wrap;

如此一來，我們的排版就會呈現橫著排列，但是接下來的問題是，我們無法搭配width去設定我們所希望的每一個橫向有幾個版面，因此加上flex-wrap:wrap;這一段的效果，使得我們可以更加進一步的設定我們的 width

.col {
    width: calc(100% / 3);
}

這樣設定的結果是，我們的版面會依照我們想要的橫向出現我們希望出現的數量。
在這裡還有一個重點，請務必在css中設定

* {
    box-sizing: border-box;
}

如同前面所說，此行會設定所有元素計算大小的方式以元素的邊框計算，避免邊框的pixel影響我們所想要的版型。

今天的教材可以至我的GitHub上下載 我的第一個網頁-5