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

Flexbox 佈局

說到整個頁面上的佈局,就不得不提最好用的 css 方法:flexbox。其中有非常多的知識,目的是為了幫助我們對元素做排版跟對齊。基本會了 flexbox 後你就能做出各種好看排版的頁面了。以下提供兩個非常實用的連結:

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

A Complete Guide to Flexbox

最後還有一個 css grid 跟 flex 功用是相當,也是處理頁面佈局,是更新的方法,2020 年大部分的瀏覽器也支援了,建議可以先學 flex,有興趣再去看看grid。

以上 position 與 flex 的用法對初學者來說可能還需要時間摸索,因為知識點太多,一篇文章也沒辦法囊括,所以建議去找一些有例子的教學文或影片學習。熟悉以後就基本能做出大部分你在網路上看到的頁面了!

Huaying Tsai

Huaying Tsai

擅長 Python, Javascript, React, GraphQL。 想寫寫一些適合新手的程式語言教學文。 想推廣現代社會學習多元技能的風氣,建立了技能交換的平台 - https://thoth.tw
台灣