CSS中設置盒子的寬度是非常常見的操作，而設置盒子寬度等于CSS中定義的寬度卻常常被忽視。在設計網頁布局時，讓盒子寬度等于CSS定義的寬度可以使得頁面更加美觀和規范。下面介紹幾種讓盒子寬度等于CSS定義的寬度的方法。

方法一：
.box{
width: 50%;
max-width: 500px;
margin: 0 auto;
padding: 10px;
}

使用上述代碼可以讓盒子的寬度等于定義的 width（50%），同時設置最大寬度為 500px，防止盒子過寬。通過 margin 居中和設置 padding，使得盒子看起來更加美觀。

方法二：
.box{
width: calc(100% - 20px);
margin: 0 10px;
}

使用計算屬性 calc，讓盒子的寬度等于 100% 減去 20px 的寬度，再通過 margin 設置左右間距，使得盒子寬度等于 CSS 中定義的寬度。這種方法無需考慮最大寬度的問題，同時可以對 margin 進行自由設置。

方法三：
.box{
display: flex;
justify-content: center;
align-items: center;
}
.box div{
width: 80%;
}

通過設置盒子為 flex 布局，使用 justify-content 和 align-items 居中盒子。再將內部元素的寬度設置為 80% 即可讓盒子的寬度等于 CSS 中定義的寬度。這種方法對于內部元素的寬度不需要進行自由設置的情況非常適用。