CSS是網頁設計中必不可少的一部分，其中邊框是頁面美化的重要一環。然而，在設置邊框時我們可能會遇到一個問題，那就是邊框撐大了盒子。這個問題很常見，如果不好處理，會影響頁面的美觀度。那么，我們應該如何避免邊框撐大盒子呢？

.box {
width: 200px;
height: 200px;
border: 1px solid black;
box-sizing: border-box;
}

在CSS中，我們可以使用box-sizing屬性來解決這個問題。這個屬性有三個可選值：

• content-box：默認值，元素的寬度和高度，不包括邊框和內邊距。
• padding-box：元素的寬度和高度，包括內邊距，但不包括邊框。
• border-box：元素的寬度和高度，包括內邊距和邊框。

我們可以看到，border-box是我們需要的屬性值。在使用這個屬性時，元素的邊框會被計算在內，不會再撐大盒子。上面的代碼就用border-box解決了邊框撐大盒子的問題。

為了使代碼更加清晰，我們可以使用pre標簽來顯示代碼：

.box {
width: 200px;
height: 200px;
border: 1px solid black;
box-sizing: border-box;
}

總的來說，使用box-sizing: border-box;可以很好地解決邊框撐大盒子的問題，提高了頁面的美觀度。