box-sizing是CSS中非常重要的一個屬性，它可以用來指定如何計算一個元素的寬度和高度。通常，我們在設置元素的寬度和高度時，會把元素的內容盒子（content-box）、內邊距（padding）和邊框（border）都算進去。但有時候，我們希望元素的寬度和高度只包括內容盒子，而不計算內邊距和邊框，這時候就可以使用box-sizing屬性。

/* 定義元素的盒子模型為border-box，即元素的寬度和高度包括內邊距和邊框 */
.box {
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 10px;
border: 1px solid #000;
}
/* 定義元素的盒子模型為content-box，即元素的寬度和高度只包括內容盒子 */
.box {
box-sizing: content-box;
width: 100px;
height: 100px;
padding: 10px;
border: 1px solid #000;
}

box-sizing屬性有兩個值可選：

• content-box：元素的寬度和高度只包括內容盒子
• border-box：元素的寬度和高度包括內邊距、邊框和內容盒子

使用box-sizing屬性可以方便地控制元素的尺寸，特別是在做響應式布局時非常有用。比如，在移動端開發中，我們可能需要把某個元素的寬度設置為屏幕寬度的50%，這時候就可以使用box-sizing:border-box，這樣元素的實際寬度就是屏幕寬度的50%，不需要再考慮內邊距和邊框的影響。