CSS – 筆記 | WP 網站學習部落

DOM Tree

DOM Tree (Document Object Model 文件物件模型) 是加載到瀏覽器中的網頁的樹狀表示。在 DOM Tree 中，
Parent Node 可被稱為 Child Node 的父元素 (Parent Element)，反之，Child Node可稱為 Parent Node 的子元素 (Child Element)。瀏覽器加載網頁時，它會創建該頁面的 DOM Tree。

CSS簡介

CSS (Cascading Style Sheet) 被用來設定網頁的樣式及佈局。舉例來說，改變字體、顏色、尺寸以及擺放您的內容、拆分為多欄,或是添加動畫效果和其它裝飾的特性。注意！我們沒有必要了解所有的 CSS 屬性，只要認識常用的以及實用的屬性即可。

CSS comment 語法為：/**/

CSS放置位置

CSS 程式碼基本上可放置於三個地方：

1. inline styling - inline styling 的優點是優先層級最高，但缺點是只能對特定的標籤設定樣式。

<p style="color: blue; background-color: pink">測試文字</p>

2. internal styling - internal styling 的優點是方便撰寫，但若有多個 HTML 頁面，則難以維護程式碼。

在 <head> 標籤裡，新增 <style> 標籤來存放 css code：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Document</title>

<style>

p {

color: blue;

background-color: pink;

}

</style>

</head>

<body>

<p>測試文字</p>

</body>

</html>

3. external styling - external styling 為最常見的放置位置，其優點為容易維護。

在工作目錄中新增一個 style.css 檔案，將所有 css code 放入此 style.css 檔案中，並在 <head> 標籤裡，新增 <link> 標籤如下：

HTML：

<!DOCTYPE html>

<head>

<title>Document</title>

<link rel="stylesheet" href="./style.css" />

</head>

<body>

</body>

</html>

style.css：

p {

color: blue;

background-color: pink;

}

CSS顏色設定

CSS 當中有下列幾種常見的顏色設定方式：

1. Color Keywords：這些為 CSS 預定保留的關鍵字，例如：red, black, purple, green, coral 等等。

2. rgb：依照光學三原色，分別設定紅、綠、藍三個色彩，數值範圍是 0 到 255，共 256 種不同選擇。每個color channel 使用1 byte來儲存。

3. rgba：同 rgb，但使用多一個叫 alpha 的 channel 來儲存透明度。透明度範圍是 0 到 1。

4. hex：使用十六進制的數字來代表顏色。十六進制數字的範圍是 0, 1, 2, ..., 8, 9, A, B, C, ..., F。

5. HSL：即色相、飽和度、亮度 (英語：Hue, Saturation, Lightness)。這種表示法試圖做到比基於笛卡爾坐標系的幾何結構 RGB 更加直觀。HSL 與 hex 系統互換可由用 https://coloors86.netlify.app 完成。

CSS Selectors 選擇器

■ Universal Selector (*) - 匹配任何類型的 HTML element。

例如：* {color: black;}

■ Element Selector - 可選擇有特定的 HTML element

例如：p {color: black;}

■ ID Selector - 可選擇有特定 ID 屬性的 HTML element。

例如：#id-name {color: black;}

■ Class Selector - 可選擇所有有特定 class 屬性的 HTML element。

例如：.class-name {color: black;}

Element Selector and Class Selector 併用：

例如：p.class-name {color: black;}

■ Grouping Selector - 可一次選擇所有數個 HTML 元素，並以逗號分隔。

例如：h1, h2, h3, h4 {color: black;}

■ Descendant (後裔) Selector - 由兩個或多個用空格分隔的選擇器組成。

例如：div.link a {color: black;} => 選取在 <div >標籤中 (class 為 link)裡面的 <a> 標籤文字為黑色

■ Attribute Selector - 選擇所有具有相同屬性的 HTML 元素。

例如：input[type="text"] {color: red;} => 選取在 <input >標籤中所有 type 屬性為 text 的文字為紅色

■ pseudo-class 用於指定所選元素的特殊狀態。例如：:hover 可用於在用戶滑鼠懸停在按鈕上時更改按鈕的樣式，:active 可用於在用戶滑鼠點擊按鈕上時更改按鈕的樣式，:focus 可用於在用戶滑鼠點擊按鈕上時更改按鈕的樣式，如果點擊別處時則恢復原來樣式。 :nth-child() 可用來選擇第 n 個元素。

例如：

.test {color: red;}

.test:hover {color: blue;}

.test {color: red;}

.test:active {color: blue;}

■ pseudo-element 是添加到選擇器的關鍵字，可讓我們設置所選元素的特定部分的樣式。例如：::first-line 可用於更改段落第一行的字體。

pseudo-element (偽元素) 的目的在於創造一個 DOM 當中不存在的 HTML 元素。我們知道第一行並沒有被任何 tag 包住，但 ::first-line 選取的過程中，就像是用了一個看不到的 tag 把第一行包住，所以才能選到這行。這就是 pseudo-element (偽元素) 的命名原因。

例如：

p::first-letter {font-size: 54px;} => <p> tag 第一個文字字體為 54px

p::first-line {font-size: 34px;} => <p> tag 第一行文字字體為 34px

p::before {content: ">> ";} => <p> tag 前面新增 >> 符號

*::selection {background-color: lightgreen;} => 用滑鼠選取網頁內容時背景顏色變成 lightgreen

CSS重點概念

Inheritance

■ Parents and Children - 在HTML當中的 DOM Tree中，Parent Node 可被稱為 Child Node 的父元素 (Parent Element)，反之，Child Node 可稱為 Parent Node 的子元素 (Child Element)。

■ Inherited and Non-Inherited Properties-CSS 當中的某些屬性會被子元素繼承，而某些不會。會繼承的屬性中，常見的包含 color, font-family, font-size, font-weight, list-style-type, text-align。詳細清單請見https://www.w3.org/TR/CSS21/propidx.html。然而，因為 user agent styling 優先度比 inheritance 更高，所以要注意瀏覽器的預設樣式可能會覆蓋繼承的屬性。例如：<a> 標籤的顏色通常需要額外設定。

Conflicting Styling

■ 由於一個 HTML 文件可以連結到數個 CSS Stylesheet，且單一 Stylesheet 內部可能出現重複設定樣式的情況，所以 CSS 程式碼之間可能存在衝突。

■ 衝突處理原則有 Priority, Specificity, 以及 Order Rule。

Priority

根據 W3C 的標準，網頁瀏覽器的預設樣式被稱為 user agent stylesheet，而網頁瀏覽器連結的 stylesheet 被稱為 user stylesheet。 Priority 優先級順序為：

1. Inline Styling
2. User Stylesheet (Specificity)
3. User Agent Stylesheet
4. Inheritance

Specificity

CSS 選擇器有不同的 specificities。例如：選擇 id 比選擇 class 更 specific，所以當一個標籤有兩個具體程度不同的 CSS 選擇器時，它會取更 specific (具體) 的樣式並套用於標籤上面，而不考慮順序前後。

1. id-specificity (1, 0, 0)
2. class-specificity (0, 1, 0)
3. tag - specificity (0, 0, 1)

Order Rule

Order Rule (順序規則) 是指：

1. 當我們有相同 specificity 的選擇器時，後寫的選擇器樣式會覆寫前面寫的樣式。

2. 放在比較後面的 <link> stylesheet 會覆寫放在前面的 <link> stylesheet。

CSS 單位

CSS 的單位包含兩大類別：absolute units 以及 relative units。

Absolute units

Absolute units 是指有預設數值或是現實生活定義的單位，包含 px (代表 pixel，長度為 2.54 cm (1 inch) 的 1/96 ), in, mm, cm 等等。

Relative units

Relative units 是指相對於某種數值的單位，包含：

1. em - 相對於 parent element 的長度。

在多層的 DOM Tree當中，越下層的 element 的 em 值可能難以計算。

2. rem - root em 的意思。

rem 會找到 <html> 這個元素的設定。網頁瀏覽器的預設 font size 為 16 px，所以1 em 等於 16 px。如果年長使用者的網頁瀏覽器設定字體放大，則網頁瀏覽器的預設 font size 可能為 24 px，則 1 em 等於24 px。

3. vw - viewport width 的縮寫，是指目前 viewport (也就是瀏覽器視窗)的寬度的 1/100。

100 vw 長度通常會略寬於網頁寬度，所以設定某個元素的寬度為 100 vw 會導致出現 horizontal scrollbar。

4. vh - viewport height 的縮寫指目前 viewport (也就是瀏覽器視窗)的高度的 1/100。

5. % - percentage 代表相對於 parent element 的值。

例如：parent element 的 width 是 500 px，在 child element 設定 width 為 50 %，則 child element 寬度就是 250 px。

文字樣式 text styling

• font-size - 設置字體的大小。可以設置絕對單位或是相對單位。

• text-align - 設置 block element 或 table cell 中的 content 的水平對齊位置。

• text-decoration - 設置文本上裝飾線的外觀，例如：none, underline, line-through。

• line-height - 通常用於設置文字行距。

• letter-spacing - 設置文字水平間距。

• font-family - 為所選元素指定一個或多個字體系列的優先列表。

• text-indent - 設置斷落的內縮長度。

• font-weight - 設置粗體字。

背景樣式

• background-color - 用來設定 HTML 元素的背景顏色，

值可以是顏色亦可以是特定關鍵字，例如：transparent。

• background-image - 在元素上設置一個或多個背景圖像。

background-image: url("test.jpg");

• background-size - 設置元素背景圖像的大小。

圖像可以保留其自然大小、拉伸或限制以適應可用空間。mdn background-size

若值設定為 contain，則會在其容器內盡可能大地等比例缩放圖像，而不裁剪或拉伸圖像。如果容器大於圖像，這將導致圖像重複平鋪，除非 background-repeat 屬性設置為 no-repeat。

若設定 cover，則會將圖像 (同時保持其比例) 縮放到盡可能小的尺寸以填充容器 (即：其高度和寬度都完全覆蓋容器) 不留空白。如果背景的比例與元素不同，則圖像將被垂直或水平裁剪。

• background-position - 設置每個背景圖像的初始位置。

center 使圖像居中。也可設定：top, left, bottom, right

• background - 背景各種設定的 shorthand 設定。

可一次設置所有背景樣式屬性，例如：顏色、圖像、原點和大小，或重複方法。例如：

background: green; 可代表 background-color: green;

background: url("test.jpg"); 可代表 background-image: url("test.jpg"); °

CSS Box Model

CSS Box Model 是指，每個 block element 都被視為一個 box，並且 box 由 margin, border, padding 以及 content 所組成。inline element 僅使用 Box Model 中定義的一部分屬性。

• content：顯示內容的區域，使用 width 和 height 等屬性調整大小。

• padding：位於 content 周圍的區域，在 content 與 border之間，可使用 padding 屬性調整大小。

/* Apply to all four sides */
padding: 1em;

/* top and bottom | left and right */
padding: 5% 10%;

/* top | right | bottom | left */
padding: 5px 1em 0 2em;

• border：包住 content 與 padding 的邊框;，可使用 border 屬性調整大小。

border: 1px solid black;

• margin：border 外的區域，可用 margin 屬性調整大小 (方法與 padding 相同)。

padding、border 以及 margin 都可再分別設定上下左右的個別屬性。另外，border 可特別設定 border-radius屬性。

• width 屬性指定元素的寬度。預設情況下，該屬性定義內容 content 的寬度。但是，如果 box-sizing 設置為 border-box，它會被設定為 border 區域的寬度。

• height 屬性指定元素的高度。預設情況下，該屬性定義 content 區域的高度。但是，如果 box-sizing 設置為 border-box，它會被設定為 border 區域的高度。

CSS 當中有個非常特別的規則，那就是 width 可以直接設定 %，但 height 不行！

如果我們希望使用 % 來設定某個元素的高度的話，我們必須先設定 parent element 高度為某個特定的值，這樣child element 的 % 就可以計算出來。例如：設定 parent element 高度為 1000px、30vh 等等。

另外，在許多的情況之下，我們不會去設定某個元素的高度，而是讓瀏覽器根據 content 的內容來決定元素的高度。若有設定高度，則須考慮 overflow 的情況。當元素的寬度或高度小於 content 時，我們可以設定 overflow 屬性來選擇處理方式：

visible - content不會被修剪,可以呈現在元素框之外。此為預設值。

hidden - 如果需要，內容將被剪裁以適合元素。不提供滾動條。

scroll - 如有必要，內容將被剪裁以適合填充框。瀏覽器顯示移動軸。若想要指設定特定方向的 overflow 屬性，可只選擇 overflow-x 或 overflow-y。

overflow: hidden

overflow:scroll

Box-Sizing

content-box

CSS 預設的 box-sizing 屬性為 content-box，意指 padding 與 border 會附加到已經設定的 width 與 height上面，拓展整個 box model 的大小。例如:

box 實際佔用的空間是 410 px 寬 (350+25+25+5+5) 和 210 px 高 (150+25 +25+5+5)。

border-box - 建議使用

若設定 border-box，則 width 和 height 屬性包括內容 (content)，內邊距(padding)和邊框(border)，但不包括外邊距 (margin)。例如：

box 的總寬度為 350 px，高度為 150 px，但 content 寬度只有 290 px，左右
padding 分別為 25 px，左右 border 分別為 5 px，所以 290 + 25 px + 25 px + 5 px + 5 px = 350 px 。

Display 屬性

每個 HTML 元素都有兩種 display 類型：

outer display type - 決定不同 boxes 之間在網頁的排版位置

outer display type 有三種可能：block, inline, inline-block。

inner display type - 決定 boxes 內部的元素在網頁的排版位置

Inner display type有：flex, grid。

Position 屬性

position 屬性設置元素在文檔中的定位方式。 top、right、bottom 和 left 屬性確定定位元素的最終位置。可設定的值包含：

1. static

- 元素根據文檔的 normal flow 進行定位。top、right、bottom、left 和 z-index 屬性無效。這是 position 屬性的預設值。所謂的 CSS normal flow 是指瀏覽器的正常排版規則，包含 block element換行，inline element 並排直到沒有空間等等規則。 Static 並不是 positioned element 。

z-index 是指，在 stacking context 相同的情況下，positioned element 會具有較大 z-index 的重疊元素會覆蓋具有較小 z-index 的元素。 z-index 只會套用在 positioned element 上面。

2. relative

- HTML element 根據 normal flow 定位，然後根據 top、right、bottom 和 left 的值相對於自身進行偏移。所謂的 relative是指 element is positioned relative to its normal position.

3. absolute

- 該元素會從 normal flow 中移除，不保留任何空間。根據 top、right、bottom 和 left 的值相對於自身進行定位，定位的參考對象是 closest positioned ancestor。若不斷往上找，都找不到任何 positioned ancestor，則
定位的參考對象是 initial containing block，即瀏覽器的初始視窗。

4. fixed

- 該元素會從 normal flow 中移除，不保留任何空間。根據 top、right、bottom 和 left 的值相對於自身進行定位，固定在瀏覽視窗的固定位置，不隨滾動捲軸拉動。定位的參考對象是 viewport 形成的 initial containing
block，即瀏覽器的初始視窗。

5. sticky

- sticky 是 relative position 和 fixed position 的混合體。HTML element 被視為相對定位，直到它超過指定的threshold，此時它被視為固定定位，定位的參考對象是 closest positioned ancestor。

例如： #one { position: sticky; top: 10px;} 的設定，會讓 id 為 one 的元素保持 relative position，直到元素與瀏覽器最上方的空間小於 10 px。超過指定的 threshold 後，元素會被 fixed 在距離上方 10 px 的位置。

當 position: sticky 屬性被設定給某個元素後，相對應的 top, right, bottom, left 是用來設定 sticky 的 threshold ，與自身進行飄移效果無關。

Stacking Context

Stacking Context 是 HTML 元素沿虛擬 z 軸相對於用戶的 3D 概念化，假設用戶面向的網頁為 xy 平面。HTML 元素根據元素屬性按優先級順序佔據該空間。

Stacking context 的形成情況包含 (但不限於)：

1. Root element of the document (<html>)

2. 任何元素有設定 position 的值為 absolute 或 relative，且 z-index 的值不是 auto，則內部形成新的 stacking context。

3. 任何元素有設定 position 的值為 fixed 或 sticky (sticky 適用於所有 mobile browsers)

其他請見：mdn stacking context

表格樣式設定

• border-collapse - 設置 <table> 內的單元格是否具有共享或單獨的邊框。

border: 1px solid black;

border-collapse: collapse;

• 如果螢幕太小而無法顯示完整內容，則表格將超出螢幕介面。通常這種問題會發生在手機螢幕瀏覽網頁上。如果要做出響應式表格 (responsive table)，我們可在表格元素周圍添加一個帶有 overflow-x:auto 的容器元素，例如一個 <div> 標籤。如此一來，若在手機螢幕瀏覽網頁上瀏覽表格，就會只在表格區域附近產生 horizontal scrollbar。

<div style="overflow-x: auto">

<table>...<table/>

<div>

Opacity 與 Cursor 設定

• opacity 屬性設置元素的不透明度。不透明度是元素背後的內容被隱藏的程度，與透明度相反。可設定的值範圍是 0 到 1，0 代表完全透明，而 1 代表完全不透明。HTML 元素的 opacity 預設值為 1。

• cursor 屬性設置鼠標游標的不同圖示。

cursor: pointer

Transition 設定

Transition 屬性可以幫助我們設定某個 CSS 屬性轉換時的 timing function 以及速度。 Transition 本身為一個shorthand property，可以一次設定 transition-property, transition-duration, transition-timing-function, and transition-delay 四種 CSS 屬性。

常見的 transition 設定是： property name | duration | easing function。其他的可用設定可參考 MDN。
Easing function 可有可無，Easing function 可參考：https://easings.net/zh-tw

建議在 h1 設定 transition，效果比較好！

h1 {

transition: all 1s ease-in-out;

}

h1:hover {

background-color: rgb(140, 24, 185);

color: white;

}

Transform 屬性

transform 屬性允許我們旋轉、縮放、傾斜或平移HTML元素。它修改了CSS 視覺格式化模型的坐標空間。每當我們使用一個或多個 Transform 屬性時，瀏覽器都會通過一系列內部矩陣乘法計算 HTML 元素的結果位置、大
小和形狀。

transform 可設定的值包含：translate, rotate, scale。每個值都可分別設定 x, y, z 方向的變換。

translate - 平移

HTML

<body>

</div>

</body>

CSS

div.container {

width: 500px;

height: 500px;

background-color: black;

}

div.box {

width: 100px;

height: 100px;

background-color: aqua;

transition: all 1s;

}

div.box:hover {

transform: translate(100px, 200px);

cursor: pointer;

}

當滑鼠移到 box 時，此時會向右、下飄移各 100px 及 200px

置中技巧

HTML

<body>

</div>

</body>

CSS

div.container {

width: 500px;

height: 500px;

background-color: black;

position: relative;

}

div.box {

width: 100px;

height: 100px;

background-color: aqua;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

提醒：

1. top、left 的 50% 是相對於 div.container 的 50%

2. transform: translate 的 -50% 是相對於自己的

rotate - 旋轉

語法：

transform: rotate(180deg); => 預設值為 z 旋轉

transform: rotatex(180deg);

transform: rotatey(180deg);

HTML

<body>

</div>

</body>

CSS

div.container {

width: 500px;

height: 500px;

background-color: black;

}

div.box {

width: 100px;

height: 100px;

background-color: aqua;

transition: all 1s;

}

div.box:hover {

transform: rotate(180deg);

}

scale - 縮放

transform: scale(0.5); => 縮小 50%，預設值為 1

HTML

<body>

</div>

</body>

CSS

div.container {

width: 500px;

height: 500px;

background-color: black;

}

div.box {

width: 100px;

height: 100px;

background-color: aqua;

transition: all 1s;

}

div.box:hover {

transform: rotate(0.5);

}

CSS animation 動畫

- CSS 動畫可由 transition 屬性與 transform 屬性合併設定來完成。然而，若我們希望製作更複雜的動畫，則可使用 CSS 的 animation 屬性來客製化動畫流程。

每個 CSS 動畫可以設定：

1. animation-name (keyframes)

2. animation-duration (動畫維持時間)

3. animation-timing-function

4. animation-delay (延遲多久時間後開始動畫)

5. animation-iteration-count (循環次數)

以及 animation-direction, animation-fill-mode (動畫播放完成後的屬性), animation-play-state 等等屬性。

- CSS 的 animation 屬性是個 shorthand property，可一次設定上述的多種 animation 相關屬性。設定的順序是name, duration, timing-function, delay, iteration-count, direction, fill-mode。

- 若有跳過的設定，則會套用 CSS 的預設值。例如：animation: cross 1s 3s forwards。是指，keyframes 為cross 的動畫，開頭到結束的時間為一秒，延遲三秒，fill-mode 為 forwards。其餘屬性皆保留為預設值。

響應式網頁設計 (RWD)

響應式網頁設計 (Responsive Web Design) 是一種網頁設計的技術，這種設計可使網站在不同的裝置 (從桌面電腦顯示器、行動電話、平板或其他行動裝置)上瀏覽時，對應不同解析度皆有適合的呈現，減少使用者進行
縮放、平移和捲動等操作行為。

過去的前端工程師需要針對各種裝置進行不同的設計，但目前主流的響應式網頁設計原則是：

1. Flexbox 來自動排版，不需要再去對不同螢幕寬度做個別設定。

2. 元素、圖片皆使用相對單位，如 rem、%、vh、vw 來調整大小，防止它們跑版。

Flexbox

現代網頁的佈局排版要配合響應式網頁的設計理念，所以需要一種事半功倍的 CSS 寫法。Flexbox 佈局背後的主要思想是讓容器能夠改變其項目的寬度/高度 (和順序) 以最好地填充可用空間 (主要是為了適應各種顯示設備
和屏幕尺寸) 彈性容器擴展項目以填充可用的可用空間或縮小它們以防止溢出。

參考網站：CSS-TRICKS

Properties for the Parent (flex container)

display: flex 是一種 inner display type

任何定義 display: flex 的元素皆為 flex container，而此元素內部的 HTML元素皆為 flex item。

flex item 本身可以再定義 display: flexflex 變成 flex container，所以一個 HTML元素可同時為 flex container 以及 flex item。對於這個 HTML元素來說，outer display type 是 flex item, inner display type 是 flex。

範例：

flex container 可在設定 display: flex 之後，再設定下列的屬性：

flex-direction

flex-direction 屬性設置 flex items 如何放置在 flex 容器中的主要配置方向 (main axis)。可使用的值包含：

1. row - flex items 橫向放置 (預設值)

2. column - flex items 直向放置

3. row-reverse - flex items 橫向相反放置

4. column-reverse - flex items 直向相反放置

flex-wrap

flex-wrap 屬性設置 flex items是強制在一行上還是可以換行到多行上。在預設情況下，flex-wrap 的值是 no-wrap，flex items 不會換行。因此，我們需要手動設定 flex-wrap:wrap。

justify-content

justify-content 屬性定義了瀏覽器如何沿著 flex container 的主軸 (main axis) 在 flex items 之間和周圍分配空間，常見可設定的值有：

• flex-start (預設值)

• flex-end

• center

• space-between

• space-around

• space-evenly

align-items

在 Flexbox 中，align-items 屬性控制項目在 cross axis (與main axis軸垂直)上的對齊方式。常見可
設定的值有：

• stretch (預設值)

• flex-start

• flex-end

• center

• baseline

Properties for the Children (flex items)

Flex items可設定的常見屬性包含：

1. flex-grow

flex-grow 屬性指定如何將 flex container 中的剩餘空間 (remaining space) 分配給 flex items。flex-grow 屬性可以設定每個 flex item 的彈性增長因子 (growfactor)。成長因子值範圍是 [0, ∞]。

剩餘空間 (remaining space) 是 flex container 的大小減去所有 flex item 大小的總和。如果所有同級的 flex items 具有相同的彈性增長因子，則所有項目將獲得相同的剩餘空間份額，否則根據不同彈性增長因子數值的比例分配。

2. flex-shrink

flex-shrink 定義了 flex item 在必要時收縮的能力 (預設值為：1)，基本上可以不用去調整。

3. flex-basis

flex-basis 定義了在分配剩餘空間之前元素的默認大小。Flex container 的空間會先分配給 flex-basis，有剩餘才會按照 flex-grow 分配。flex-basis 可以是長度 (例如：20% 、5rem 等) 或關鍵字。

flex-basis 僅適用於 flex container 的 main axis 。例如：如果我們設定 flex-direction: row，則 flex-basis 是設定 flex item 的 width 大小。反之，如果我們設定 flex-direction:column，則 flex-basis 是設定 flex item 的 height 大小。

flex 這個 shorthand property 可以一次設定 grow, shrink, basis 三種屬性。

語法：

flex: 1 1 200px

4. align-self

align-self 允許為單個 flex item 覆寫默認對齊方式 (由align-items 指定的對齊方式)。

flexbox and image

處理大圖片排列的技巧：(放於 <div> 標籤內)。

此法亦可用於圖片跟文字的排列。

Media Query

響應式網頁設計並沒有一個通用標準。重要的是，在不同的螢幕大小上，網頁都能夠被正常的瀏覽，沒有排版的問題發生。以下為幾個設計原則：

1. 專注於螢幕大小，而非裝置。世界上的裝置有無數種，所以在響應式網頁設計上，只需要設計給小、中、大、超大螢幕這些大方向的類型即可。

320 px ~ 480 px 屬於行動裝置、481 px ~ 768 px 屬於平板裝置、769 px ~ 1024 px 屬於小型螢幕或筆電、1025 px ~ 1200 px 屬於桌上型電腦，1200 px 以上屬於大型螢幕或電視。

2. 能用 flexbox 處理，就用 flexbox 處理。不能用 flexbox，就用 media query 處理。

3. 圖片與其他元素應該要隨著螢幕的大小變化，而改變。(建議大小設置以 %、vh、vw 為主)

範例：

當螢幕寬度大於 800 px 時：

當螢幕寬度介於 501 px ~ 799 px 時：

當螢幕寬度小於 500 px 時：

Bootstrap

Bootstrap 是一組用於網路應用程式開發的開源前端 (所謂「前端」，指的是展現給終端使用者的介面。與之對應的「後端」是在伺服器上面執行的代碼)框架，包括 HTML、CSS 及 JavaScript 的框架，提供字體排印、表單、按鈕、導航及其他各種元件及 Javascript 擴充套件，旨在使動態網頁和 Web 應用的開發更加容易。

基本上， Bootstrap 就是套用。用別人寫好的 HTML, CSS, JavaScript 來快速建置網站。 Bootstrap 內建的樣式都有自帶 RWD 的設計，且經過多人驗證與改良，可以方便有效的建立起美觀的網站。

使用 Include via CDN：

1. 將 <link> 標籤內容複製並貼上於 HTML <head> 標籤中

2. 將 <script> 標籤內容複製並貼上於 HTML <body> 標籤中

3. 到 Bootstrap 的 Docs 頁面，找尋需要使用的模板，複製 HTML code 並貼上於自己的 HTML 檔案中

免費資源

免費圖片網站：

• Unsplash

• Pexels

免費圖形與圖案：

• ICONS8

• cdnjs 尋找 font-awesome 的 HTML <link> 程式碼，複製後貼於自己 HTML 裡 <head> 標籤中，再到 fontawesome 找尋想要的圖案，複製後貼於自己 HTML 裡 <body> 標籤中。

• unDraw 下載免費的 svg 檔案。

Sass

Sass (英文全稱：Syntactically Awesome Stylesheets) 是一種將 CSS 視為程式語言的網頁開發技術。 Sass 的特點在於支援設定變數、函數、import 語法、nested 語法等等，使得網頁開發者可以快速的寫出高相容性、跨瀏覽器的 CSS 程式碼。Sass 也被包含在許多熱門的 library 當中。例如：Bootstrap 內部的大量程式碼是由 scss 文件編譯而成。

在文字編輯器當中寫的 scss 文件不能直接被網頁瀏覽器讀取。Sass 編譯器將 scss 文件編譯成 CSS 文件後，才能夠被 HTML 文件用來套用樣式。若 scss 文件有 bug，則無法成功編譯出 CSS 文件。每次更新 scss 文件後，都需要重新編譯出相對應的新 CSS 文件中

在 VScode 中，安裝 Live Sass Compiler 插件：