content-box是box-sizing的默認值，設(shè)置元素的寬高僅指內(nèi)容區(qū)域的大小，不包括padding和border，例如width:200px;height:100px;padding:10px;border:5px時，實際總寬為230px，因為padding和border會額外增加尺寸；而border-box將padding和border包含在設(shè)定的寬高中，如設(shè)置width:200px后，整個盒子總寬即為200px，內(nèi)容區(qū)自動壓縮為170px，推薦使用border-box因其便于精確布局；選擇方式上建議全局統(tǒng)一使用border-box以減少計算負擔(dān)，但某些場景如需精確控制內(nèi)容區(qū)或依賴默認行為時可保留content-box；常見誤區(qū)是使用width:100%時若未配合border-box會導(dǎo)致溢出父容器，解決方法是添加box-sizing:border-box。

在CSS中，box-sizing 屬性用來控制元素的寬度和高度如何計算。最常見的兩個值是 border-box 和 content-box，它們的區(qū)別主要在于是否將邊框（border）和內(nèi)邊距（padding）計入元素的總寬高。

什么是 content-box？

這是 box-sizing 的默認值。
當(dāng)你設(shè)置一個元素的 width: 200px; height: 100px; padding: 10px; border: 5px solid black;，它的實際顯示尺寸會比你設(shè)定的大一圈：

• 內(nèi)容區(qū)域?qū)挘?00px
• 加上左右 padding 各10px → 總寬變?yōu)?200 + 20 = 220px
• 加上左右 border 各5px → 總寬變成 220 + 10 = 230px

也就是說，你設(shè)的是內(nèi)容區(qū)大小，其他部分是額外加出來的。

這種模式在早期網(wǎng)頁布局中比較常見，但隨著響應(yīng)式設(shè)計的發(fā)展，它在做精確布局時容易出問題。

立即學(xué)習(xí)“前端免費學(xué)習(xí)筆記（深入）”；

什么是 border-box？為什么推薦使用它？

設(shè)置為 box-sizing: border-box; 后，元素的寬高就包括了內(nèi)容、padding 和 border：

• 設(shè)置 width: 200px; 那么整個盒子（包括邊框和內(nèi)邊距）就是 200px 寬
• 實際內(nèi)容區(qū)會自動壓縮：200px 減去 padding 和 border 的寬度

舉個例子：

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

這個元素的總寬度就是 200px，內(nèi)部的內(nèi)容區(qū)會被壓縮成 200 - 102 -52 = 170px。

這在現(xiàn)代前端開發(fā)中非常實用，尤其是做柵格系統(tǒng)或者響應(yīng)式布局的時候，能避免很多“算錯了”的尷尬。

如何選擇用哪個？

通常建議直接統(tǒng)一使用 border-box，可以減少布局時的計算負擔(dān)。你可以這樣全局設(shè)置：

* {
  box-sizing: border-box;
}

不過也有幾種情況適合保留 content-box：

• 需要對內(nèi)容區(qū)域進行精確控制（比如畫布或特定圖形）
• 使用 或某些舊版組件樣式依賴默認行為
  想讓子元素撐開父容器時更靈活一些

  ---

  常見誤區(qū)提醒

  有時候開發(fā)者以為設(shè)置了 width: 100% 就一定能填滿父容器，但如果用了 padding 又沒用 border-box，就會溢出。例如：

  • 父容器寬 300px
  • 子元素設(shè)置 width: 100%; padding: 10px;
  • 實際子元素寬變成 300 + 20 = 320px，超出了父級

  這種情況只要加上 box-sizing: border-box; 就解決了。

  ---

  基本上就這些。雖然看起來是個小屬性，但在布局細節(jié)上影響挺大，理解清楚能省不少調(diào)試時間。

以上就是CSS中box-sizing屬性border-box和content-box的區(qū)別的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！