By Huaying Tsai in Web Development — 2020年8月14日

Web Development 網站開發 (3) - CSS 介紹：佈局

CSS 除了給你的文字、物件上色調整大小、間距之外，還有另一個就是佈局。我們可以用 CSS 去指定什麼樣的內容要放在怎麼樣的位置。比如說一個置頂的選單；左邊有類別可以選；右邊是內容等等。以下會介紹一下佈局相關的知識像是 Block vs Inline、Position 以及 Flexbox 等。

Block vs Inline

之前有介紹過 HTML 的標籤例如 div / span / img / table / h1 / h2 / ul / li / a ... 大部分 HTML 不是 Block 就是 Inline。Block 指的是這個標籤的內容會佔據整行的空間，而 Inline 則是不佔據。

以下用例子解釋：

<div>12</div>
<div>34</div>
<span>56</span>
<span>78</span>
<div>90</div>

<!--
div 屬於 block; span 屬於 inline
所以以上的語法會在瀏覽器中顯示:

12
34
5678
90

解釋： 
第一行12因為是block所以佔據了整行，所以接下來的內容會顯示在下一行
34也是一樣
56因為是inline，所以如果之後的內容也是inline，就會出現在同一行
90因為又是block所以自成一行顯示在5678下面
-->

<div>123<b>4</b>5678</div>

<!--
因為b是Inline並且有粗體效果，所以以上會顯示： 
12345678 （4是粗體）
-->

至於哪一些 HTML 標籤是 Block/Inline 可以參考這裡：https://www.w3schools.com/html/html_blocks.asp

回到 CSS，我們其實是可以用 CSS 去改變標籤的預設 Block/Inline 屬性，用到的是display 。

<div style="display: inline;">123</div>
<div style="display: inline;">456</div>

<!--
以上利用css把div改成inline屬性，所以顯示結果如下：

123456
-->

<span style="display: block;">123</span>
<span style="display: block;">456</span>

<!--
以上利用css把span改成block屬性，所以顯示結果如下：

123
456
-->

<div style="display:none;">123</div>

<!--
display 還有其他的選項譬如 none 跟 inline-block;
上述的div因為設成display:none;
所以就不會顯示在瀏覽器上
-->

Position 佈局

你應該會注意到不管是 Block 還是 Inline，整個 HTML 都還是從上到下或是從左至右的堆疊順序。如果要跳脫出這個順序，我們可以使用 Position 這個 CSS 裡的語法。Position 有一些常用的選擇，譬如 fixed / absolute / relative / sticky，然後通常會搭配 top / bottom / left / right 去調整實際位置。

/* 用 fixed 可以讓你的元入固定在頁面上某個位置。 很多網站上面的 header 就是利用 position: fixed 固定在頁面上方，不隨著滑鼠滾動而移動位置 */
.header {
  position: fixed;
  top: 0
}

/* absolute常常會跟 relative 當配使用。*/
/* relative會讓此元素變成可以定位，而absolute會讓元素脫離原本的layout，會根據上層可定位的元素去定位。 使用absolute或是fixed可以讓元素之間有機會重疊*/ 
/* 假想以下是一個通知的鈴鐺icon，當收到通知時鈴鐺右上角會出現一個小紅點並且會與鈴鐺有些小重疊，那css就可以寫成類似以下的邏輯:*/
.bell {
  position: relative;
}
.red-dot {
  position: absolute;
  top: 0;
  right: 3px;
  background-color: red;
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

另外 position: sticky; 也是蠻好用的一個方法，有點融合了 relative 與 fixed的功能，礙於篇幅，更多 position 相關細節可以參考：

https://www.w3schools.com/css/css_positioning.asp