宽度的各种情况

在不同盒模型（content-box/border-box）中style.width与offsetWidth/clientWidth的关系

结论

1. content-box
   • offsetWidth = style.width+左右padding+左右border
   • clientWidth = style.width+左右padding
2. border-box
   • offsetWidth = style.width
   • clientWidth = style.width-左右border

可以看出，offsetWidth永远等于clientWidth+左右border

浏览器实际情况

1. content-box

   css样式：
   

   计算结果：
   
   属性大小：
   
   204(clientWidth)=200(style.width)+22(padding)
   211(offsetWidth)=204(clientWidth)+23.636(border)
   实际是约等于

2. border-box

   css样式：
   
   计算结果：
   
   属性大小：
   
   193(clientWidth)=200(style.width)-2*3.636(border)
   实际是约等于
   200(offsetWidth)=200(style.width)

关于border宽度不一致：

由于浏览器缩放导致，系统分辨率缩放和系统文字缩放等等都会影响border-width的实际计算结果。
演示gif：

clientWidth和offsetWidth不精确

clientWidth和offsetWidth返回的是四舍五入的，
想要得到精确的值可以用getBoundingClientRect()