box-sizing: border-box 是 CSS 中的一個盒子模型屬性，用于指定元素的盒子模型的計算方式。默認的盒子模型是 content-box，而使用 border-box 則表示元素的寬度和高度包括了元素的邊框和內邊距，而不僅僅是內容的寬度和高度。

在默認的 content-box 盒子模型中，寬度和高度僅包括內容區域，而邊框和內邊距會額外增加到元素的寬度和高度之外。這可能會導致布局計算變得更為復雜，特別是在設計響應式布局時。

使用 box-sizing: border-box 可以使盒子模型更加直觀和便于布局。例如，如果你設置一個元素的寬度為 100px，那么無論你添加了多少邊框和內邊距，這個元素的總寬度都會保持為 100px。

/* 默認的盒子模型：content-box */
.element {width: 100px;padding: 10px;border: 5px solid black;/* 實際寬度為 100px（width） + 20px（padding） + 10px（border） = 130px */
}/* 使用 border-box 盒子模型 */
.element {box-sizing: border-box;width: 100px;padding: 10px;border: 5px solid black;/* 實際寬度始終為 100px，邊框和內邊距會占用部分空間 */
}

總體而言，box-sizing: border-box 的使用可以簡化布局計算，使得樣式設置更加直觀和方便。