box-sizing: border-box不同

兩個 CSS 屬性：

• overflow: hidden;
  
  

• box-sizing: border-box;
  
  

它們確實完全不一樣的功能，以下是詳細比較：

🟩 box-sizing: border-box; 是什麼？

它是用來定義元素寬高的計算方式。

預設行為（content-box）：

width: 200px;

padding: 10px;

border: 5px;

👉 實際佔據寬度 = 200（內容）+ 20（padding 左右）+ 10（border 左右）= 230px

使用 border-box 時：

box-sizing: border-box;

width: 200px;

padding: 10px;

border: 5px;

👉 實際佔據寬度 = 200px 總寬包含所有內容、padding、border

✅ 好處：元素尺寸「剛剛好」，不會因為加 padding 或 border 而撐爆原設定的大小

🟨 overflow: hidden; 是什麼？

它是控制元素內部超出邊界的內容要不要顯示。

常見用途：