CSS中獲取盒子寬度是前端開發中常用的一項技能，尤其是在響應式布局中更是必不可少。這里介紹幾種獲取盒子寬度的方法。 第一種方法是使用CSS中的width屬性獲取盒子寬度。這種方法比較簡單，直接調用元素的width屬性即可。如下所示：

/* HTML代碼 */
<div id="box"></div>
/* CSS代碼 */
#box {
width: 300px;
}
/* JavaScript代碼 */
let box = document.querySelector('#box');
let width = box.width;
console.log(width); //輸出 300

第二種方法是使用JavaScript中的offsetWidth屬性獲取盒子寬度。這種方法可以獲取元素的實際寬度，包括元素的padding、border和content寬度。如下所示：

/* HTML代碼 */
<div id="box"></div>
/* CSS代碼 */
#box {
width: 300px;
padding: 10px;
border: 1px solid #999;
}
/* JavaScript代碼 */
let box = document.querySelector('#box');
let width = box.offsetWidth;
console.log(width); //輸出 322 (width: 300 + padding: 10*2 + border: 1*2)

第三種方法是使用JavaScript中的getBoundingClientRect()方法獲取盒子寬度。這種方法可以獲取元素的實際寬度，包括元素的padding、border和content寬度，同時可以獲取元素的位置信息。如下所示：

/* HTML代碼 */
<div id="box"></div>
/* CSS代碼 */
#box {
width: 300px;
padding: 10px;
border: 1px solid #999;
}
/* JavaScript代碼 */
let box = document.querySelector('#box');
let rect = box.getBoundingClientRect();
let width = rect.width;
console.log(width); //輸出 322 (width: 300 + padding: 10*2 + border: 1*2)

以上三種方法是獲取盒子寬度常用的方法，通過這些方法可以獲取到元素的實際寬度，以便我們進行布局和樣式的調整。