HTML / CSS 核心概念
前端面試基礎題

<!-- ❌ 非語意化：滿版 div，不知道每塊是什麼 -->
<div class="header"> ... </div>
<div class="nav"> ... </div>
<div class="main"> ... </div>

<!-- ✅ 語意化：標籤本身說明了用途 -->
<header> ... </header>
<nav> ... </nav>
<main>
  <article> ... </article>
  <aside> ... </aside>
</main>
<footer> ... </footer>

/* content-box（預設）：實際渲染寬度 = 200 + 20 + 20 = 240px */
.box-content {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;   /* 往外擴張 */
}

/* border-box（推薦）：實際渲染寬度 = 就是 200px */
.box-border {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;   /* 向內壓縮 content 空間 */
}

/* 全局設定（最佳實踐） */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 3 欄等寬 Grid */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 1fr = 1 份自由空間 */
  gap: 16px;
}

/* 響應式 Grid：自動決定欄數 */
.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 24px;
}

/* 子元素跨欄 */
.featured-card {
  grid-column: span 2;    /* 佔 2 欄 */
  grid-row: span 2;       /* 佔 2 列 */
}

/* 水平垂直置中（配合 Grid） */
.centered {
  display: grid;
  place-items: center;    /* = align-items + justify-items */
}

/* Specificity: (0,0,0,1) → 最低 */
p { color: black; }

/* Specificity: (0,0,1,1) → class + element */
.text p { color: blue; }

/* Specificity: (0,1,0,1) → id + element */
#main p { color: green; }

/* Specificity: (1,0,0,0) → inline style，幾乎無法覆蓋 */
<p style="color: red;">文字</p>

/* 例外：!important 直接無視 specificity（不推薦濫用）*/
p { color: purple !important; }

/* 1. Viewport meta tag（HTML head 必加） */
<meta name="viewport" content="width=device-width, initial-scale=1">

/* 2. Mobile-First：先寫手機版，再用 min-width 覆蓋 */
.container {
  padding: 16px;        /* 手機版（預設） */
  font-size: 14px;
}

@media (min-width: 768px) {    /* 768px 以上（平板） */
  .container {
    padding: 32px;
    font-size: 16px;
  }
}

@media (min-width: 1024px) {   /* 1024px 以上（桌機） */
  .container {
    padding: 48px;
    max-width: 1280px;
    margin: 0 auto;
  }
}