Day.4 「CSS 基礎中的基礎！」 —— CSS 盒模型 box-model & 距離單位

2021 iThome 鐵人賽

DAY 4

Modern Web

入門前端技能之旅系列第 4 篇

13th鐵人賽 css box-model

Mao

團隊請付費解鎖團隊名稱

2021-09-13 16:28:25

2475 瀏覽

人是視覺動物

當網頁架構用得差不多了，想自己安排布局，會開始想辦法把網頁變得更漂亮。
Google Chrome 很好用，有提供開發者工具給我們除錯，點開 elements 標籤最下面會有個方形的圖案。

box-model

這就是我們今天的主角 —— CSS 的基礎盒模型 box-model

什麼是 CSS？

CSS 是 Cascading Style Sheets 的簡寫，中文翻譯為階層式樣式表。
名字內有階層兩個字，顧名思義，他可以使用多個選擇器組合，來達到階層式的管理樣式。

如何使用 CSS？

先教兩個最簡單最基本的 CSS 使用方法。
CSS

在 <head> 標籤內添加 <style> 標籤，如紅色框，標籤內使用你要套用 CSS 樣式的標籤名，如橘色框，在裡面撰寫屬性值，如紅色框內的橘色框。
或著直接在標籤內添加 style 屬性，並在裡面賦予屬性值，如綠色框。

盒模型

盒模型能幫助我們更加了解如何操控網頁並進行排版。
每個標籤都有獨立的盒模型，看盒模型我們可以觀察到有三個英文單字，四個顏色

紅色：margin，外邊距，可以想成與下一個標籤的距離
橘色：border，邊框，就是內容的外框
綠色：padding，內邊距，可以想成內容與外框的留白距離
藍色：內容

距離單位

在學習盒模型語法時，必須先了解 CSS 的距離單位。

不管在哪都固定大小的單位

px 是絕對單位，為螢幕中最基礎單位，1px 代表 1 個點，如下圖：字的大小 24px，固定在視窗內佔 24 位元的大小
rem 是相對單位，每個元素都依據根元素的 px 值乘以倍數，如下圖：字的大小 1.5rem，固定比祖先大 1.5 倍的大小，瀏覽器內建字體原始大小為 16px。

取決於父元素單位大小的單位

em 是相對單位，每個子元素都依據父元素的 px 值乘以倍數，如下圖：字的大小 1.5em，比老爸大 1.5 倍。
% 是相對單位，每個子元素都依據父元素的 px 值乘以百分比，如下圖：字的大小 150%，比老爸大 150 %。

取決於視窗大小的單位

vh 是相對單位，每個元素都依據視窗的（像素高度 / 100）乘以倍數，如下圖：字的大小 5vh，視窗的 1 / 20 高的大小。
vw 是相對單位，每個元素都依據視窗的（像素寬度 / 100）乘以倍數，如下圖：字的大小 5vw，視窗的 1 / 20 寬的大小。

unit
圖片為示意圖

盒模型通用語法

可以看到盒模型在margin、border、padding，都可以在四個方位設定距離

而設定的語法也很簡單直白，在此用margin做示範：

margin-top: 上距，上外邊距
margin-right: 右距，右外邊距
margin-bottom: 下距，下外邊距
margin-left: 左距，左外邊距

一行程式碼簡化的語法

margin: 上距右距下距左距，四個值的順序不能錯，分別設定上、右、下、左
margin: 上距水平距下距，三個值的順序不能錯，分別設定上、左右、下
margin: 垂直距水平距，兩個值的順序不能錯，分別設定上下與左右
margin: 距離，一個值你也很難錯，四個方向一起設定

以上 margin 也可以提替成 border 來設定 border 或 padding 來設定 padding

Margin 的特色

因為 Margin 毛最多，所以先來說 Margin，搞定 Margin，後面就輕鬆了！

上下相隔的距離會重疊。

左右相隔的距離不會重疊。

行內元素的垂直 margin 沒有效果。
inline

可以使用負值，讓元素重疊，注意在同個層級，右邊會壓過左邊，下面會壓過上面
margin
同層級下，右邊蓋住左邊

父子元素 Margin 外邊距重疊

當父元素包著子元素，同時都有使用 margin 時，垂直 margin 會取最大的 margin 值
max

但當父元素有設定 padding 或 border 時，就不會重疊了。
border

還有屬於不同的 BFC 元素，如：子元素使用 float 浮動元素

什麼是 BFC？ BFC 是 Block formatting context 簡寫，簡單的說就是定位的方式改變。想更瞭解可以看MDN 官方文件

這個部分要等到認識更多 CSS 才比較好解釋。
簡單說，就是脫離老爸的控制（脫離文檔流）

什麼是脫離文檔流？簡單說，原本每個元素都是一個個盒模型，依次排列在網頁上面，看起來像流水般由上而下依序排下來，稱之為「文檔流」。而脫離文檔流，顧名思義就是脫離出來的意思。

Border 的特色

可以設定邊框的寬度、樣式與顏色
此外還可以使用 border-radius 來設定外圍的圓滑程度。

border: 寬度 樣式 顏色;
border-radius: 圓滑程度;

寬度、樣式、顏色上網查，比較容易理解易學，就不多加琢磨了。

稍微介紹圓滑程度border-radius。

/* 這個是沒有字母的最基本型態 */
.border { border: 10px solid #f88; }
/* 當設定一個值，四個角都會依據設定值為半徑做弧度 */
.a { border-radius: 20px; }
/* 當設定為 % 數，會依照內容寬度乘以百分比為半徑做弧度 */
.b { border-radius: 50%; } 
/* 當有兩個值，第一個值對應的是左上與右下，第二個值對應的是右上與左下 */
.c { border-radius: 0 50%; }
/* 當有三個值，第一個值對應左上，第二個值對應的是右上與左下，第三個值為右下 */
.d { border-radius: 0 100% 50%; }
/* 當有四個值，就順時針從右上開始分別對應值 */
.e { border-radius: 0 25% 50% 100%; }
/* 當要做特別形狀時，參數會更麻煩 */
.f { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }

border
上面的英文字母分別對應形狀

想做特別的圓弧形？

Padding 的特色

Padding 就相對單純許多。
可以設定內容留白的寬度，與 margin 語法差不多，顏色則取自內容的背景色，背景顏色也是很簡單易學的語法，可以上網查，更進階的漸層背景顏色、多重背景、濾鏡背景，如果未來有時間會補充。
在行內元素狀態下，padding 水平會正常，但垂直就跟 margin 一樣會失效。如圖：
inline padding
此外值得一提的是，margin 是元素之間的距離，所以不能算在元素內，padding 則是在元素內留白的距離，算是元素的一份子，常見的例子就是按鈕。