box-sizing
╱🚧 under construction
Last updated
Was this helpful?
╱🚧 under construction
Last updated
Was this helpful?
⟩ ⟩ box-sizing
content-box:
border-box:
📗
anything within <details> will have box-sizing: content-box, not border-box❗️ 📗
⭐️ 注意:此 fix 在 內對某些「不受繼承的屬性」沒有作用,例如:box-sizing,👉 詳見:
為何不直接使用 * { box-sizing: border-box }
主要是因為:如果網頁有使用第三方的網頁元件 () 的話,那麼它所設定的 box-sizing 屬性,可能會與上面的設定相衝,這時要回復成網頁元件要的格式可能會有點麻煩。
但如果是使用 box-sizing: inherint 的方式,這時只要將網頁元件最上層的元素 (top-level container) 設定成 box-sizing: content-box,它以下的元素就會自動繼承此屬性,而不用我們一個一個手動改。
注意:margin 與 padding 不要用 inherit 的方式,否則你只要在 HTML 中改了某個元素的 margin 或 padding,它的所有子元素全部都會變成相同的 margin 與 padding,這通常不是我們要的。
是一個內建的 ,它內部的 slotted elements (如:<summary>) 的某些屬性並不會繼承外部的 CSS 設定 (如:box-sizing),所以如果用 "inherited fix" 對這些 slotted elements 沒用,但如果用 "universal fix" 則有用。