当css border-box处于活动状态时，了解offsetWidth和clientWidth

Question

我来自这个问题：Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively

据我所知，这是标准盒型号的情况，是吗？

但是当你有这样的事情时会发生什么：

*{
  box-sizing: border-box;
}

offsetWidth和clientWidth现在是否相等？这种情况是否始终与此规则相关？

那么padding-box呢？

Answer 1

亲自尝试：http://codepen.io/anon/pen/WvojWw

默认设置为box-sizing: border-box，但只需在样式中更改即可获得不同的结果。

单击按钮时，它会为您计算offsetWidth和clientWidth。

偏移宽度等于除边距之外的所有宽度，因此如果使用border-box，则只需获得指定的宽度。

客户端宽度等于除边距和边框之外的所有宽度，因此当您使用specified width - borders时，您将获得border-box。

<强> offsetWidth

没有border-box：

offsetWidth = width + padding + border

border-box：

offsetWidth = width

<强> clientWidth

没有border-box：

clientWidth = width + padding

border-box：

clientWidth = width - border