為什么設(shè)置了100px寬度的盒子會顯示更寬？因為默認使用的是 content-box 模型，實際寬度包括內(nèi)容、padding 和 border。1. 默認情況下，box-sizing 是 content-box，設(shè)置的 width 僅指內(nèi)容區(qū)域，padding 和 border 會額外增加整體寬度；2. 使用 border-box 可讓設(shè)定的 width 包含內(nèi)容、padding 和 border，布局更直觀；3. 推薦全局設(shè)置 box-sizing: border-box，避免布局錯位，尤其適合響應(yīng)式設(shè)計；4. 特殊場景下可使用 content-box，但應(yīng)避免混用兩種模式。

剛開始學 CSS 的時候，很多人會遇到一個問題：為什么我設(shè)置了寬度100px的盒子，實際顯示出來卻比100px寬？這很可能是因為你沒搞清楚 box-sizing 這個屬性的作用。它決定了元素的寬度和高度怎么算，直接影響布局效果。

默認情況下，所有元素都是 content-box，也就是只算內(nèi)容區(qū)域的大小。但如果你改成 border-box，那整個計算方式就變了——這時候的寬高包括了內(nèi)容、內(nèi)邊距（padding）和邊框（border）。

下面我們就來聊聊這兩個值的區(qū)別，以及在什么場景下用哪個更好。

什么是 content-box？

這是瀏覽器默認的盒模型。當你設(shè)置一個元素的寬度為 width: 200px，它的內(nèi)容區(qū)就是200px寬。如果加上 padding 或 border，整體尺寸就會變大。

舉個例子：

.box {
  width: 200px;
  padding: 10px;
  border: 5px solid #000;
}

在 content-box 模式下，這個盒子的實際寬度是： 200px（內(nèi)容） 2×10px（左右padding） 2×5px（左右border） = 230px

這種模式適合需要精確控制內(nèi)容區(qū)域大小的場景，比如表格單元格、某些特定布局組件。

為什么大家更喜歡用 border-box？

很多前端開發(fā)者會在項目一開始就全局設(shè)置成 border-box，因為它更容易控制整體尺寸。在這種模式下，無論有沒有 padding 和 border，你設(shè)定的 width 和 height 就是最終顯示出來的寬高。

還是上面的例子，換成 border-box 后：

.box {
  box-sizing: border-box;
  width: 200px;
  padding: 10px;
  border: 5px solid #000;
}

這個盒子的總寬度依然是200px。系統(tǒng)會自動從內(nèi)容區(qū)域“壓縮”出空間給 padding 和 border。

好處很明顯：

• 布局更直觀，不用手動做加減法
• 在響應(yīng)式設(shè)計中更容易控制比例
• 避免因為添加邊框或內(nèi)邊距導致布局錯位

這也是為什么很多 CSS 框架（比如 Bootstrap）都默認使用 border-box。

實際使用建議

如果你剛上手 CSS，建議從一開始就在全局樣式里加上這個設(shè)置：

* {
  box-sizing: border-box;
}

這樣可以避免很多“為什么盒子變寬了”的困惑。當然，有些特殊場景可能還是需要用 content-box，比如你想單獨控制內(nèi)容區(qū)域的大小，或者做一些復雜的彈性計算。

幾點建議：

• 統(tǒng)一使用 border-box 是現(xiàn)代開發(fā)的標準做法
• 不要輕易混用兩種模式，除非有明確需求
• 如果你需要動態(tài)調(diào)整盒子大小，注意配合使用 width、max-width 等屬性

總的來說，box-sizing 雖然看起來是個小屬性，但它影響的是整個頁面的布局邏輯。理解 content-box 和 border-box 的區(qū)別，能讓你在寫布局的時候少踩很多坑?；旧暇瓦@些，不復雜但容易忽略。

以上是了解CSS盒裝屬性：Content-Box與Border-Box的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！