為什麼 Bootstrap 3 切換到 `box-sizing: border-box`？

揭開Bootstrap 3 中對Border-Box 的切換

Bootstrap 3 引入了一個顯著的變化，包含了一個顯著的變化，包含了box-sizing: bbox-box 的所有元素。這種與預設內容框值的偏差引發了對其基本原理的質疑。

在從 Bootstrap 2.3.2 到 3.0.0 的遷移過程中，開發人員觀察到由於此變化而導致的顯著尺寸差異。 bootstrap.css 中的以下CSS 規則指出了此修改的核心：

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

Border-Box 對維度的影響

在傳統的內容盒模型下，元素的寬度和高度只考慮其內容，不包括填充和邊框。這會在嘗試計算總寬度或高度時導致問題，因為它們會超出聲明的值。

相較之下，border-box 在寬度和高度計算中包含內邊距和邊框。這個簡化的模型確保最終渲染的盒子大小與指定的寬度和高度精確對齊，無論填充或邊框大小如何。

Border-Box 在 Bootstrap 網格系統中的作用

雖然移動到 border-box 會影響所有元素，在 Bootstrap 3 的流體網格系統中影響尤其大。在流體網格中，列被定義為容器總寬度的百分比，允許它們響應式縮放。

在內容框模型下，計算列大小需要考慮兩側的固定寬度裝訂線。 border-box 消除了這種複雜性。列的聲明寬度現在包括其邊框和填充，提供一致且直觀的尺寸調整方法。

業界接受度和好處

除了對 Bootstrap 網格系統的好處之外，採用box-sizing：border-box 在 Web 開發中得到了廣泛的接受。它促進了跨瀏覽器的一致行為，並提供了一種直覺的佈局和大小調整方法。

Bootstrap 3 的發行說明明確說明了此更改背後的意圖：「預設情況下更好的盒子模型。Bootstrap 中的所有內容都會調整盒子大小：邊框框，更容易調整大小選項和增強的網格系統。的瀏覽器支援](http://css-tricks.com/box-sizing/)

[Border-Box 的優點](http ://www.paulirish.com/2012/box-sizing -border-box-ftw/)

以上是為什麼 Bootstrap 3 切換到 `box-sizing: border-box`？的詳細內容。更多資訊請關注PHP中文網其他相關文章！