box‐sizing - daniel-qa/Vue GitHub Wiki

*, *::before, *::after {
  box-sizing: border-box;
}

這叫 萬用選擇器（universal selector），意思是：

選取「所有 HTML 元素」

包含：

div

input

button

table

span

……全部都算

所以這一段其實是在說：

所有元素都用 border-box

---

原本超框

<input v-model="title" style="width: 100%; padding: 8px; margin-top: 6px;" /> 

修正後:

<input v-model="title" style="width: 100%; padding: 8px; margin-top: 6px; box-sizing: border-box;" />

為什麼你加了 box-sizing: border-box; 就正常？

原本：

width: 100%;
padding: 8px;

在 預設 content-box 下實際寬度會變成：

實際寬度 = 100% + padding(16px)

所以 input 會 撐出父層（這就是你看到的對不齊）。

改成 border-box 後：

100% 已經包含 padding

寬度才會乖乖貼齊。

• 但逐個 inline 修不是好做法

你現在這樣：

<input v-model="title"
       style="width: 100%; padding: 8px; margin-top: 6px; box-sizing: border-box;" />

問題：

每個 input 都要寫一次（會漏）

inline style 無法被覆蓋

未來改 spacing 會變災難

Vue template 會越來越髒

• 正確解法：一次全域解決

在你的 main.css / global.scss / App.vue 加這段就好：

*, *::before, *::after {
  box-sizing: border-box;
}

這是 現代專案標配，不是 hack，是應該本來就要有。

然後把 inline style 拆掉（這才是 Vue 寫法）

改成：

<input v-model="title" class="formInput" />
.formInput {
  width: 100%;
  padding: 8px;
  margin-top: 6px;
}

• 為什麼不要把 box-sizing 寫在 component？

因為這不是「元件樣式」，而是：

整個 layout 計算模型的規則

它應該是 Design System Level 的設定。

就像你不會只在某頁才用 flexbox 一樣。

📦 幾乎所有框架都預設這樣做

Bootstrap reboot 有

Tailwind preflight 有

MUI 有

Ant Design 有

Normalize.css 延伸版本也有

你現在只是手動補回來而已。

🧠 一句話記住

box-sizing 是世界觀，不是樣式。

---

先看預設世界（content-box）到底多反人類

瀏覽器預設是：

box-sizing: content-box;

計算方式是：

實際寬度 = width + padding + border

例如你寫：

width: 100%;
padding: 8px;
border: 1px solid;

實際變成：

100% + 16px + 2px → 爆出容器

所以才會出現：

input 明明 100% 卻溢出去

grid / flex 對不起來

要一直手算 padding

RWD 很難控制

border-box 的世界（現代 layout 應該用的）

box-sizing: border-box;

計算方式變成：

你設定的 width = 已經包含 padding + border

也就是：

內容會自動縮小來配合，而不是把盒子撐大

這才是人類直覺的「我要這格就是 300px」。

那為什麼要寫成這樣？

*, *::before, *::after {
  box-sizing: border-box;
}

這不是裝酷，是在補齊 CSS 的繼承漏洞。