延續上一篇的三個觀念，我們再繼續看這三個觀念：
Box model, Position, z-index
參考學習資源：4. Box model (padding, border, margin)
有沒有發現不同的載體（手機、筆電、平板）顯示每個網頁的長寬還有間距會不一樣？這個跟 Box model 息息相關。進階操作會在 CSS 中添加@media
用 W3School 體驗看看吧
Padding（內距）
元素內容（如文字、圖片）與自己邊框之間的空間。
你可能會用在：
- 按鈕： 讓文字和按鈕邊框之間有一些空間，看起來舒服、美觀。
button {
padding: 10px 20px;
} - 文字區塊： 文字與外框距離適當，讓閱讀變輕鬆。
.article {
padding: 20px;
}
② Border（邊框）
元素外圍的邊線，可以是實線、虛線等。
你可能會用在：
- 表單輸入框： 提供視覺提示，知道該在哪裡輸入文字。
input {
border: 2px solid blue;
}
③ Margin（外距）
元素與其他元素之間的距離，避免彼此貼得太近。
你可能會用在：
- 圖片、文章段落之間的距離調整： 避免畫面看起來擁擠，提升閱讀舒適度。
img, p {
margin-bottom: 20px;
} - 版面排版： 用 margin 來控制元素的排列和對齊，創造整潔有序的版面。
.header {
進階：在不同裝置間排版不一樣: 加上
margin-top: 30px;
}@media這一串程式碼是 AI 生成，我還沒自己嘗試/* 手機版時 */
@media (max-width: 600px) {
.card {
padding: 10px; /* 減少內距 */
margin: 5px; /* 減少外距 */
}
}
5. position（static, fixed, relative, absolute, sticky）
這些是CSS 中的 position 屬性，是用來決定元素在畫面上如何定位的方式。在上下滑動網頁的時候，有一些元素是固定的，有些則會跟著往下跑。
可以用https://developer.mozilla.org/en-US/docs/Web/CSS/position 玩玩看。
static
預設排版，不特別使用
relative
微調元素位置，這個我覺得很難被使用者察覺，通常會跟z-index 一起使用。
absolute
元素完全獨立定位（如浮動按鈕）
fixed
固定元素（如右下角浮動按鈕、回頂端）
sticky
導覽列或標題固定置頂，這個很常看到。
補充一下，div 是CSS常用的容器，你可以把文字、圖片、按鈕、表單等內容放在 div 裡面，並透過 CSS 來控制這個容器的外觀和排版。白話文有點像PPT 的圖形。
div {
position: sticky;
top: 0; /* 當元素碰到螢幕上緣時會停住固定 */
}
6. z-index
決定重疊的元素，誰要在上面、誰要在下面。
因為網頁設計上常常會有很多元素重疊在一起，這時就需要 z-index 來決定它們的疊放順序。
z-index的數字越大，元素越在上層（比較靠近你的眼睛）。z-index數字小，就會被壓在比較底下（遠離你）。
主要的使用時機點:
- 彈跳視窗 或 Modal 視窗 要蓋住頁面其他元素。
- 浮動按鈕，像是回到頂端的按鈕，要蓋在所有內容之上。
可利用網站玩玩看。
下一篇應該是我寫CSS筆記的最後一篇，預計講
7. pseudo-class (:hover)
8. cursor (pointer)
9. absolute units and relative units (em, rem, vh, vh)
10. display:none v.s. visibility:hidden v.s. opacity 0.0
11. flexbox (justify-content, align-items)
12. Responsive Web Design with media query
13. Bootstrap, Tailwind intro
