box-sizing常用的屬性有哪些？分別有什麼作用？

王铁柱6發表於2024-11-23

box-sizing 屬性用於控制元素的盒子模型如何計算總寬度和總高度。它有兩個主要值：

  • content-box (預設值): 這是標準的盒子模型。元素的寬度和高度只包括內容區域。 padding, border 和 margin 會被新增到這個寬度和高度之外，使元素的總尺寸變大。

    width = content width
height = content height
total width = width + padding-left + padding-right + border-left + border-right
total height = height + padding-top + padding-bottom + border-top + border-bottom

  • border-box: 在這個模型中，元素的寬度和高度包括內容區域、padding 和 border。 margin 仍然在寬度和高度之外。 這意味著，即使你新增 padding 和 border，元素的總大小也不會改變，而是會壓縮內容區域來容納 padding 和 border。

    width = content width + padding-left + padding-right + border-left + border-right
height = content height + padding-top + padding-bottom + border-top + border-bottom
total width = width
total height = height

哪個更好用？

border-box 通常被認為更直觀和易於使用，尤其是在佈局方面。原因如下：

  • 更易於計算尺寸: 你設定的寬度就是元素最終的寬度，無需考慮 padding 和 border 的影響。
  • 簡化佈局: 更容易建立具有固定寬度和高度的佈局，因為你不必不斷地計算 padding 和 border 的影響。
  • 響應式設計更友好: 在響應式設計中，使用 border-box 可以更容易地控制元素的尺寸，因為它們不會隨著 padding 和 border 的變化而改變。

許多 CSS 框架和重置樣式表（例如 Normalize.css）都會將 box-sizing 設定為 border-box，以便於開發。 你可以在你的 CSS 中新增以下程式碼，將其應用於所有元素：

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

這行程式碼會將 box-sizing: border-box; 應用於所有元素，包括偽元素 ::before 和 ::after，確保所有元素都使用相同的盒子模型。

除了 content-box 和 border-box 之外，還有一個不太常用的值：

  • inherit: 該值會繼承父元素的 box-sizing 屬性值。

總而言之，雖然 content-box 是預設值，但 border-box 在現代 Web 開發中更為常用，因為它更易於使用和維護。

相關文章