CSS 樣式 box-sizing 是網(wǎng)頁設(shè)計中非常有用的一項功能，它能控制元素如何計算其大小和它的邊框。

.box {
box-sizing: border-box;
width: 300px;
padding: 10px;
border: 1px solid black;
}

上述代碼將創(chuàng)建一個帶有 300px 寬度的盒子，其中包含了 10px 的內(nèi)邊距和 1px 的黑色邊框。如果沒有設(shè)置box-sizing: border-box，該盒子的寬度會被解釋成 “盒子內(nèi)容區(qū)域的寬度為 300px”，即使給盒子增加了內(nèi)邊距和邊框?qū)挾龋凶拥膶嶋H寬度也仍會保持在 300px。

但是，一旦box-sizing: border-box屬性被添加到 CSS 樣式中，該盒子的寬度將被解釋成 “盒子的邊框和內(nèi)邊距都是盒子內(nèi)容區(qū)域的一部分”。這意味著如果您將內(nèi)邊距和邊框添加到該盒子中，盒子的實際寬度將會擴(kuò)展以包括它們。

這里實際上有兩種 box-sizing 屬性值可供使用：border-box 和 content-box。它們的表現(xiàn)方式是恰好相反的，其中content-box是默認(rèn)的 box-sizing 屬性值。

.box {
box-sizing: content-box;
width: 300px;
padding: 10px;
border: 1px solid black;
}

上述代碼將創(chuàng)建一個相同的盒子，但由于box-sizing: content-box屬性被使用，margin，border 和 padding 將被視為盒子內(nèi)容的一部分，而不是整個盒子的一部分。

綜上所述，box-sizing屬性是一種非常有用的工具，它可以在對盒子進(jìn)行布局和樣式設(shè)計時提供更靈活的控制和更直觀的預(yù)測。它可以幫助您確保元素的大小和位置在不同的上下文中保持一致。