jQuery outerWidth()方法

jQuery outerWidth()方法返回一个元素的宽度，包括它的padding和border，但不包括它的margin。

语法

$(selector).outerWidth(includeMargin)

参数：
- selector ：必需，一个jQuery选择器，指定要获取宽度的元素。
- includeMargin ：可选，一个布尔值，表示是否将元素的外边距(Margin)也计算在内。默认是 false。

示例1

<div id="box" style="width:100px; padding:10px; border:1px solid black;"></div>

$(document).ready(function(){
  var width = $('#box').outerWidth();
  console.log(width); // 输出112，也就是宽度100 + padding 10*2 + border 1*2
})

示例2

<div style="margin: 20px;"></div>
<div style="margin: 40px;"></div>
<div style="margin: 80px;"></div>

$(document).ready(function(){
  var width_without_margin = $('div').outerWidth();
  var width_with_margin = $('div').outerWidth(true);
  console.log(width_without_margin); // 输出0，因为这些div没有宽度
  console.log(width_with_margin); // 分别输出40，80，160，因为计算了margin
})

总结

outerWidth()方法是返回一个元素的宽度的，它包括padding和border，但不包括margin。该方法在处理元素宽度时非常有用，尤其是在相对定位、绝对定位和计算元素宽度时。注意，该方法返回值不是CSS单位字符串，而是以像素为单位的整数。