1. 盒模型（Box Model）是什么？標準盒模型和 IE 盒模型的區別？

• 答案：
  CSS 盒模型將元素視為一個盒子，由內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）組成。
  • 標準盒模型：元素的寬度（width）僅指內容寬度。
  • IE盒模型：元素的寬度包括內容、內邊距和邊框的總和。
  • 切換方式：

    box-sizing: content-box; /* 標準模式（默認） */
    box-sizing: border-box;  /* IE模式（推薦使用） */
    

---

2. CSS 選擇器的優先級如何計算？

• 答案：
  優先級從高到低依次為：
  1. !important（慎用，破壞自然優先級）
  2. 內聯樣式（如 style="color: red;"）
  3. ID 選擇器（#id）
  4. 類/偽類/屬性選擇器（.class, :hover, [type="text"]）
  5. 元素/偽元素選擇器（div, ::before）
  • 示例：
    .box #title 的優先級高于 div.title（ID > 類 > 元素）。

---

3. 如何讓一個元素水平垂直居中？

• 答案：
  方法 1：Flex 布局（推薦）

  .parent {display: flex;justify-content: center; /* 水平居中 */align-items: center;     /* 垂直居中 */
  }
  

  方法 2：絕對定位 + 平移

  .child {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%); /* 自身寬高的一半 */
  }
  

---

4. Flex 布局和 Grid 布局的區別？

• 答案：
  • Flex：一維布局，適合按行或列排列元素（如導航欄、卡片列表）。
  • Grid：二維布局，可以同時控制行和列（如復雜網格、儀表盤）。
  • 比喻：
    Flex 像排隊，只能橫向或縱向對齊；Grid 像棋盤，可以精確控制每個格子的位置。

---

5. 什么是 BFC？如何觸發 BFC？

• 答案：
  • BFC（塊級格式化上下文）：一個獨立的渲染區域，內部元素不會影響外部。
  • 觸發條件：
    • overflow: hidden
    • float: left/right
    • position: absolute/fixed
    • display: inline-block/flex/grid
  • 作用：
    • 解決外邊距重疊（如父子元素 margin 合并）。
    • 清除浮動（防止父元素高度塌陷）。

---

6. 如何實現響應式設計？

• 答案：
  1. 媒體查詢（Media Queries）：

     @media (max-width: 768px) {/* 手機端樣式 */
     }
     

  2. 相對單位：使用 %、vw、rem 替代固定像素。
  3. 彈性布局：Flex/Grid 自動適應屏幕尺寸。
  4. 圖片適配：srcset 屬性或 max-width: 100% 防止圖片溢出。

---

7. CSS 動畫（animation）和過渡（transition）的區別？

• 答案：
  • transition：需要觸發條件（如 hover），只能定義開始和結束狀態，適合簡單變化（如顏色漸變）。

    .box { transition: width 0.5s ease; }
    .box:hover { width: 200px; }
    

  • animation：通過關鍵幀（@keyframes）控制全過程，可自動播放，適合復雜動畫（如旋轉、連續運動）。

    @keyframes spin {from { transform: rotate(0deg); }to { transform: rotate(360deg); }
    }
    .box { animation: spin 2s infinite; }
    

---

8. 如何清除浮動（clearfix）？

• 答案：
  原因：父元素未設置高度時，子元素浮動會導致父元素高度塌陷。
  解決方法：

  .parent::after {content: "";display: block;clear: both; /* 清除左右浮動 */
  }
  

---

9. 偽類（:hover）和偽元素（::before）的區別？

• 答案：
  • 偽類：選擇元素的特定狀態（如 :hover、:focus）。
  • 偽元素：在元素內創建虛擬內容（如 ::before、::after）。
  • 示例：

    .button:hover { color: red; }          /* 偽類 */
    .button::before { content: "★"; }     /* 偽元素 */
    

---

10. CSS 如何實現多列等高布局？

• 答案：
  方法 1：Flex 布局

  .parent {display: flex;
  }
  /* 子元素自動等高 */
  

  方法 2：Grid 布局

  .parent {display: grid;grid-auto-flow: column; /* 按列排列 */
  }
  

---

附：高頻進階問題

• 層疊上下文（z-index 生效條件）：需設置 position 非 static。
• CSS 預處理器（Sass/Less）的作用：變量、嵌套、混合（mixin）等。
• CSS 性能優化：減少重排（如用 transform 替代 top/left）、壓縮代碼。

以上問題覆蓋了 CSS 的核心概念和實際應用場景，建議結合代碼實踐加深理解！