css 边框框处于活动状态时了解 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，您将获得指定的宽度。

并且客户端宽度等于除了边距和边框之外的所有宽度，所以当您使用 border-box.

时，您将获得 specified width - borders

偏移宽度

没有border-box:

offsetWidth = width + padding + border

与 border-box:

offsetWidth = width

客户端宽度

没有border-box:

clientWidth = width + padding

与 border-box:

clientWidth = width - border