💊box-sizing

╱🚧 under construction

CSS ⟩ box model ⟩ box-sizing

• content-box：

• border-box：

📗 參考

• 📗 <details> & Shadow DOM & Inheritance

👥 相關

• slotted content

• <details>

• ⭐️ 常用 ⟩ CSS

border-box fix

anything within <details> will have box-sizing: content-box, not border-box❗️ 📗 <details> & Shadow DOM & Inheritance

inherited fix

/* :root = html (with higher specificity) */
:root { 
    box-sizing: border-box; 
}

/* "*" doesn't include pseudo-elements */
*, ::before, ::after {
    /* box-sizing isn’t normally an inherited property, */
    /* use `inherit` to force it.                       */
    box-sizing: inherit;
}

⭐️ 注意：此 fix 在 web componet 內對某些「不受繼承的屬性」沒有作用，例如：box-sizing，👉 詳見：<details>

🤔 為何不直接使用 * { box-sizing: border-box } ❓

主要是因為：如果網頁有使用第三方的網頁元件 (web component) 的話，那麼它所設定的 box-sizing 屬性，可能會與上面的設定相衝，這時要回復成網頁元件要的格式可能會有點麻煩。

但如果是使用 box-sizing: inherint 的方式，這時只要將網頁元件最上層的元素 (top-level container) 設定成 box-sizing: content-box，它以下的元素就會自動繼承此屬性，而不用我們一個一個手動改。

universal fix

"universal box-sizing" fix 對 slotted elements 也有效，因為 slotted elements 活在 light DOM 裡面，例如 <details> 裡面的 <summary> (slotted element) 也會受到影響。

/* ⭐️ universal box-sizing */
*, *::before, *::after {
  box-sizing: border-box;
}

<details> fix

<details> 是一個內建的 web component，它內部的 slotted elements (如：<summary>) 的某些屬性並不會繼承外部的 CSS 設定 (如：box-sizing)，所以如果用 "inherited fix" 對這些 slotted elements 沒用，但如果用 "universal fix" 則有用。

/* 
    ⭐️ box-sizing fix with <details>
    --------------------------------
    anything within the <details> element will have 
    `box-sizing: content-box`, not `border-box`.
 */

details > * {
  box-sizing: border-box;
}

注意：margin 與 padding 不要用 inherit 的方式，否則你只要在 HTML 中改了某個元素的 margin 或 padding，它的所有子元素全部都會變成相同的 margin 與 padding，這通常不是我們要的。