WEEK2 – DAY2 – 你怎麼沒感覺

「躺平」你怎麼沒感覺?

今天很奇葩，東西超多，有的東西連細節都講很深，有些卻輕輕帶過。

因為我思考很跳，但如果把所有東西都變成一個步驟，那或許我就能減少遺漏掉東西，或許我可拆解區域，拆解步驟問chatgpt，但很快我就發現我錯了，使用chatgpt canvas beta功能，結果程式跑不動，改了半天，還是不知道問題點，我還把老師的程式拿來改，確認到底是誰的問題，好~是ai的問題。

問題整理

• 在什麼情況下適合使用 @import 而不是 <link>？
• 如何選擇字型，並避免字型不被支援時的替代樣式問題？
• 在 inherit 和 initial 的設置中有什麼區別？
• 如何使用 CSS 變數來統一管理顏色與字型樣式？
• 在使用 calc() 設定寬度時，有哪些常見的應用場景？
• 如果元素的寬度需要根據視窗大小減去固定值，應該如何設計？
• 邊框的簡寫語法如何設置不同的樣式、寬度與顏色？
• 如何使用 border-radius 設定特定角的圓角？四個值的順序代表什麼？
• 當背景圖片需要固定或居中時，應該如何設置 background-attachment 與 background-position？
• background-clip 有哪些選項，各自的效果是什麼？
• 在邊框、內邊距與內容範圍之間，背景圖片如何被影響？如何驗證這些設定的差異？
• display 中的 block、inline 和 inline-block 有什麼區別？
• 當元素設置為 display: none 和 visibility: hidden 時，兩者在效果與佔位行為上有什麼差異？
• visibility: hidden 的元素如何在滑鼠懸停時再次顯示？
• 在彈性排版 (flex) 中，flex 的值如何影響子元素的寬度分配？
• flex 排版與傳統的 float 有哪些不同？在什麼情境下更適合使用 flex？
• 在網格排版 (grid) 中，如何使用 grid-template-columns 和 grid-template-rows 定義欄與列的結構？
• 如果需要設計一個 3×3 的等間距網格，應如何配置 grid-gap 屬性？
• 如何結合 flex 和 grid 排版技術，設計一個兼具彈性與規整的頁面結構？
• 當內容量多或視窗大小變化時，flex 和 grid 排版的行為有什麼不同？如何針對這些行為調整設計？
• 假如某個區塊需要先隱藏，並在使用者互動後再顯示，應該使用 display: none 還是 visibility: hidden？為什麼？
• static 與 relative 定位的行為有什麼不同？如何影響子元素的布局？
• 在 absolute 定位中，如何決定參考的父元素？
• fixed 與 absolute 定位有什麼主要差異？在什麼情境下應使用 fixed？
• 如何結合 hover 和 display 屬性實現互動效果？visibility 能否實現同樣的功能？

實做練習題

陰影與溢出設計

目標： 熟悉 box-shadow、text-shadow 和 overflow 的應用。

要求：

1. 設計一個帶有雙層陰影的區塊：
   • 外陰影：模糊 10px、擴散 5px，顏色為灰色。
   • 內陰影：模糊 5px、擴散 -2px，顏色為黑色。
2. 為區塊內的文字添加彩虹效果的文字陰影（使用 text-shadow）。
3. 設置區塊的固定寬度和高度，並嘗試以下 overflow 設定，觀察效果：
   • visible
   • hidden
   • scroll
   • auto

圖片透明度與濾鏡特效

目標： 理解 opacity 和 filter 的應用效果。

要求：

1. 使用三張相同的圖片，為每張圖片設置不同的透明度：
   • 第一張：完全不透明（opacity: 1;）。
   • 第二張：半透明（opacity: 0.5;）。
   • 第三張：完全透明（opacity: 0;）。
2. 為其中一張圖片添加以下濾鏡效果（可疊加使用）：
   • 模糊（blur(5px)）。
   • 灰階（grayscale(50%)）。
   • 增加亮度（brightness(120%)）。

邊框與圓角設置

目標： 練習設定不同的邊框樣式與圓角邊框。

要求：

1. 建立一個 div 元素，設置以下樣式：
   • 上邊框：實線（solid），寬度 5px，顏色紅色。
   • 右邊框：虛線（dashed），寬度 10px，顏色藍色。
   • 下邊框：點線（dotted），寬度 15px，顏色綠色。
   • 左邊框：雙線（double），寬度 20px，顏色橙色。
2. 將邊框的四個角設置不同的圓角，順序如下：
   • 左上角：10px
   • 右上角：20px
   • 右下角：30px
   • 左下角：40px

背景圖片設置

目標： 練習使用 CSS 控制背景圖片的各種屬性。

要求：

1. 在 body 中添加背景圖片（自行準備一張圖片，存放於 img 資料夾下，檔名為 background.jpg）。
2. 設置背景圖片：
   • 不要重複（no-repeat）。
   • 固定位置（fixed），不隨頁面滾動。
   • 圖片位置為右下角（right bottom）。

背景範圍與內邊距

目標： 探索 background-clip 的影響。

要求：

1. 建立三個 div 元素（ID 分別為 div1, div2, div3），並設置以下樣式：
   • 每個 div 的背景顏色設為 aqua，邊框寬度為 10px，樣式為點線（dotted），寬度為 300px。
   • 設置內邊距（padding）為 20px。
   • 為三個 div 設置不同的 background-clip 值：
     • div1：border-box（預設值）。
     • div2：padding-box。
     • div3：content-box。
2. 在每個 div 中添加一段描述文字，說明背景顏色的影響範圍。

綜合應用

目標： 整合學到的邊框、圓角與背景圖片屬性完成頁面設計。

要求：

1. 建立一個包含以下區塊的網頁：
   • 頂部標題區塊（帶有背景圖片，設置為 center center 且不重複）。
   • 兩個內容區塊，分別使用不同的邊框樣式（例如，實線與雙線）和圓角設置。
2. 為每個區塊設置內邊距（padding）和邊距（margin），確保布局清晰。

display 與 visibility

目標： 理解 display 和 visibility 的差異與應用。

要求：

1. 設計一組包含三個區塊的 div，分別設置以下樣式：
   • 第一個區塊：display: block;。
   • 第二個區塊：display: none; 並在滑鼠懸停時顯示。
   • 第三個區塊：visibility: hidden; 並在滑鼠懸停時顯示。

flex 與 grid 排版

目標： 理解 flex 和 grid 的基本應用。

要求：

1. 使用 flex 設計一個包含三個區塊的容器，設定以下分配比例：
   • 第一個區塊佔 3/6。
   • 第二個區塊佔 2/6。
   • 第三個區塊佔 1/6。
2. 使用 grid 設計一個 3×3 的網格容器，內含 9 個元素，為每個元素添加邊框與間距。

position 屬性應用

目標： 掌握 static、relative、absolute、fixed 的行為與特性。

要求：

1. 設計一個容器 div，設置 position: relative。
2. 在容器內放置三個子元素，分別使用：
   • position: static，不添加偏移屬性。
   • position: absolute，設置 top: 50px; left: 20px;。
   • position: fixed，設置 bottom: 10px; right: 10px;。
3. 觀察並說明各個元素的定位行為與參考位置。

圖片與文字互動效果

目標： 理解 hover 效果與文字顯示控制。

要求：

1. 使用一張圖片和對應的文字描述：
   • 預設情況下，隱藏描述文字。
   • 當滑鼠懸停於圖片上時，顯示描述文字。
2. 使用 figcaption 配合 CSS 完成上述功能。

主題	功能描述	範例代碼
CSS 引入方式	引入外部 CSS 檔案	@import url('styles.css'); 或 <link rel="stylesheet" href="styles.css">
Google Fonts	使用 Google Fonts 提供的字型	@import url('<https://fonts.googleapis.com/css2?family=Comic+Neue>');
Font Squirrel	使用 @font-face 引入本地字型	@font-face { font-family: 'Alex Brush'; src: url('AlexBrush-Regular.ttf'); }
樣式繼承	繼承父元素樣式或恢復初始值	border: inherit; color: initial;
CSS 變數	宣告與使用變數	宣告：:root { --apple: green; } 使用：color: var(--apple);
calc() 計算功能	使用數學運算設置樣式	width: calc(100% - 50px); 或 width: calc(300px + 200px);

主要觀念與程式碼

主題	功能描述	範例代碼
陰影 (box-shadow)	設置盒子的陰影效果，可自定義位置、模糊程度、擴散範圍、顏色等	box-shadow: 10px 10px 5px 2px gray; box-shadow: inset 5px 5px 10px rgba(0,0,0,0.5);
文字陰影 (text-shadow)	為文字添加陰影效果，支持多重陰影的設置	text-shadow: 2px 2px 5px red; text-shadow: 0px 0px 5px red, 5px 5px 10px orange;
內容溢出 (overflow)	控制內容溢出框範圍時的行為，選項：visible、hidden、scroll、auto	overflow: hidden;
圖片透明度 (opacity)	設置圖片透明度，範圍從 0（完全透明）到 1（完全不透明）	opacity: 0.5;
圖片濾鏡 (filter)	使用 CSS 濾鏡為圖片添加效果，例如模糊、灰階、亮度等	filter: grayscale(50%); filter: blur(5px); filter: brightness(150%);

Box Model 和 Box-sizing

概念	內容	範例程式碼
Box Model 組成	元素的總大小由 內容（content）、內邊距（padding）、邊框（border） 和 外邊距（margin） 組成。	css<br>.box { width: 200px; padding: 10px; border: 5px solid black; margin: 20px; }
content-box (預設值)	設定的寬高僅影響內容部分，內邊距與邊框會額外加到元素總大小。	css<br>.content-box { width: 200px; padding: 20px; border: 10px solid black; box-sizing: content-box; }
border-box (常用值)	設定的寬高包含內容、內邊距與邊框，適合固定大小的設計。	css<br>.border-box { width: 200px; padding: 20px; border: 10px solid black; box-sizing: border-box; }

Flexbox 基礎屬性

屬性名稱	作用	範例程式碼
display: flex	將容器轉為彈性佈局，子項目會按主軸排列。	css<br>.container { display: flex; }
justify-content	控制主軸上的子項目排列方式（如居中、間距）。	css<br>.container { display: flex; justify-content: center; }
align-items	控制交叉軸上的子項目排列方式（如垂直居中）。	css<br>.container { display: flex; align-items: center; }

Flexbox 應用範例

場景	描述	範例程式碼
水平與垂直居中	讓子項目在容器內完全居中。	html<br><div class="center-container"><div class="box">居中</div></div>css<br>.center-container { display: flex; justify-content: center; align-items: center; height: 100vh; }
水平排列與間距	子項目水平排列，且間距等分。	html<br><div class="navbar"><a>首頁</a><a>關於</a><a>聯絡</a></div>css<br>.navbar { display: flex; justify-content: space-between; }
自動換行與等寬項目	子項目超出容器時換行，且每行等寬。	html<br><div class="gallery"><div>1</div><div>2</div><div>3</div></div>css<br>.gallery { display: flex; flex-wrap: wrap; gap: 10px; }

學習重點總結

1. Box Model 是 CSS 設計的基礎，理解寬度與高度的計算方式非常重要。
2. box-sizing: border-box 是現代設計中常用的計算模式，應用於大多數場景。
3. Flexbox 是一維佈局的首選工具，適用於水平或垂直排列。
4. 實作練習：
   • 嘗試用 Flexbox 實現響應式導航列。
   • 使用 Box Model 設計卡片佈局，並比較 content-box 與 border-box 的效果

overflow 是用來控制當元素的內容超出其容器的大小（即超出設置的寬度或高度）時，應該如何處理這些超出的內容。

overflow 的值

值	描述	預設值
visible	超出的內容會 繼續顯示，不會被裁切。	預設值
hidden	超出的內容會被 裁切掉，不可見，也不會有滾動條出現。
scroll	超出的內容會被裁切，但容器會 始終顯示滾動條（即使內容未超出）。
auto	超出的內容會被裁切，並且 只有在需要時顯示滾動條。
clip	超出的內容會被裁切，不會產生滾動條（與 hidden 類似，但更簡單）。

---

overflow 屬性的應用範圍

1. 適用於區塊級元素（如 <div>）。
2. 可以單獨設置 水平 或 垂直方向的溢出控制：
   • overflow-x：控制水平方向。
   • overflow-y：控制垂直方向。

邊框與圓角設置

屬性名稱	說明	範例程式碼
border	設定邊框樣式，包含寬度、樣式與顏色。	border: 5px solid red;
border-width	設定邊框寬度，可分別指定上下左右邊框。	border-width: 5px 10px 15px 20px;
border-style	設定邊框樣式，例如 solid（實線）、dashed（虛線）、dotted（點線）、double（雙線）。	border-style: solid dashed dotted double;
border-color	設定邊框顏色，順序為上、右、下、左。	border-color: red blue green orange;
border-radius	設定邊框圓角，可針對四個角分別設定不同的值。	border-radius: 10px 20px 30px 40px;

背景圖片設置

屬性名稱	說明	範例程式碼
background-image	設定背景圖片。	background-image: url('img/background.jpg');
background-repeat	設定背景圖片是否重複，例如 no-repeat、repeat-x（水平重複）等。	background-repeat: no-repeat;
background-attachment	設定背景是否固定位置，例如 fixed（固定）或 scroll（隨滾動）。	background-attachment: fixed;
background-position	設定背景圖片位置，例如 right bottom 或 center center。	background-position: right bottom;

屬性	用途	常見值
flex-wrap	控制子項目是否換行	nowrap（不換行，預設）wrap（換行）wrap-reverse（反向換行）
justify-content	主軸上子項目排列方式	flex-start（靠左）flex-end（靠右）center（置中）space-between（兩端對齊，中間均分）space-around（周圍有相等空間）space-evenly（項目和空間均分）
align-items	交叉軸上子項目對齊方式	stretch（拉伸填滿，預設）flex-start（靠上）flex-end（靠下）center（垂直置中）baseline（基於文字基線對齊）

主題	功能描述	範例代碼
display 屬性	控制元素的顯示模式，常見值包括：block、inline、inline-block、none	display: block; display: inline; display: inline-block; display: none;
visibility 屬性	控制元素是否可見，不影響佔位空間，值包括：visible、hidden	visibility: hidden; visibility: visible;
flex 排版	使用彈性排版讓子元素自適應容器的分配	.demo { display: flex; } #reddiv_B { flex: 3; }
grid 排版	使用網格排版，定義行與列的結構	.grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; }

主題	功能描述	範例代碼
position 屬性	控制元素定位的方式，包括：static、relative、absolute、fixed	position: static; position: relative; position: absolute; position: fixed;
static 定位	預設值，無法使用 top、bottom、left、right 進行調整位置	元素默認行為
relative 定位	相對於元素的原始位置進行偏移，可使用 top、bottom、left、right	position: relative; top: 10px; left: 20px;
absolute 定位	絕對定位，相對於最近的 position: relative 或 position: absolute 的祖先元素	.parent { position: relative; } .child { position: absolute; top: 10px; left: 20px; }
fixed 定位	固定定位，相對於瀏覽器視窗進行定位，滾動視窗時不會改變位置	position: fixed; bottom: 0; right: 0;
圖片與文字互動效果	使用 hover 控制文字顯示與隱藏，例如滑鼠懸停時顯示圖片描述	figcaption { display: none; } figure:hover figcaption { display: block; }

東西太多，以後再補。