关于getBoundingClientRect()获取宽度值额外多出2px的问题咨询

这问题我之前调试样式时也碰到过！大概率是浏览器默认样式和盒模型差异搞的鬼，咱们来拆解原因和解决办法：

问题根源 #

• 浏览器默认会给表单元素（比如你的密码输入框）添加1px的边框，而getBoundingClientRect()返回的width/height是包含元素内容+内边距+边框的总尺寸。
• 你自己写的无框架页面中，蓝色div默认使用box-sizing: content-box（宽度高度仅计算内容区），如果div本身也设置了边框，那直接把div的宽高设为目标元素的rect.width/height时，div的实际总尺寸会是这个值加上自身边框宽度（比如1px边框的话，总宽就多了2px），自然会出现额外间距。
• 而Bootstrap、W3.CSS这类框架会全局设置box-sizing: border-box，让所有元素的宽高计算包含边框和内边距，所以div设置宽高为rect的值时，刚好匹配目标元素的总尺寸，不会有偏差。

解决办法 #

1. 全局统一盒模型（推荐） #

在CSS开头添加这段重置代码，和框架的处理逻辑对齐，从根源避免尺寸计算差异：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

这样所有元素的宽高都会包含边框和内边距，getBoundingClientRect()返回的尺寸可以直接赋值给蓝色div，完美匹配。

2. 单独调整蓝色div的盒模型 #

如果不想全局修改样式，只给蓝色div设置盒模型即可：

/* 替换成你的蓝色div的类名或选择器 */
.blue-highlight-div {
  box-sizing: border-box;
}

3. 手动修正尺寸计算（不推荐，灵活性差） #

如果坚持使用默认的content-box，可以手动减去蓝色div自身的边框宽度。比如div有1px边框，那代码改成：

document.addEventListener("mouseover", (e) => {
  const elem = e.target;
  const rect = elem.getBoundingClientRect();
  const x = rect.left;
  const y = rect.top;
  const w = rect.width;
  const h = rect.height;
  // 减去div左右/上下边框的总宽度
  div.style.width = (w - 2) + "px";
  div.style.height = (h - 2) + "px";
  div.style.left = x + window.scrollX + "px";
  div.style.top = y + window.scrollY + "px";
});

另外，建议检查目标元素的默认padding，浏览器也会给表单元素加默认内边距，全局重置样式时一起清除掉，能避免更多潜在的尺寸偏差。

内容的提问来源于stack exchange，提问作者Abhay Salvi