網頁設計 CSS 三個觀念：Box Model、Position 與 Z-index

延續上一篇的三個觀念，我們再繼續看這三個觀念：

W3school

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