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

剛開(kāi)始學(xué)CSS 的時(shí)候，很多人會(huì)遇到一個(gè)問(wèn)題：為什麼我設(shè)置了寬度100px的盒子，實(shí)際顯示出來(lái)卻比100px寬？這很可能是因?yàn)槟銢](méi)搞清楚box-sizing這個(gè)屬性的作用。它決定了元素的寬度和高度怎麼算，直接影響佈局效果。

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

下面我們就來(lái)聊聊這兩個(gè)值的區(qū)別，以及在什麼場(chǎng)景下用哪個(gè)更好。

什麼是content-box ？

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

舉個(gè)例子：

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

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

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

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

很多前端開(kāi)發(fā)者會(huì)在項(xiàng)目一開(kāi)始就全局設(shè)置成border-box ，因?yàn)樗菀卓刂普w尺寸。在這種模式下，無(wú)論有沒(méi)有padding 和border，你設(shè)定的width 和height 就是最終顯示出來(lái)的寬高。

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

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

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

好處很明顯：

• 佈局更直觀，不用手動(dòng)做加減法
• 在響應(yīng)式設(shè)計(jì)中更容易控制比例
• 避免因?yàn)樘砑舆吙蚧騼?nèi)邊距導(dǎo)致佈局錯(cuò)位

這也是為什麼很多CSS 框架（比如Bootstrap）都默認(rèn)使用border-box 。

實(shí)際使用建議

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

 * {
  box-sizing: border-box;
}

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

幾點(diǎn)建議：

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

總的來(lái)說(shuō)， box-sizing雖然看起來(lái)是個(gè)小屬性，但它影響的是整個(gè)頁(yè)面的佈局邏輯。理解content-box和border-box的區(qū)別，能讓你在寫(xiě)佈局的時(shí)候少踩很多坑。基本上就這些，不復(fù)雜但容易忽略。

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