javascript - css边框框处于活动状态时了解offsetWidth和clientWidth

Question

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

我知道这是标准盒子模型的情况，对吗？

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

*{
  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.

偏移宽度

没有border-box：

offsetWidth=width + padding + border

与border-box：

offsetWidth=width

客户端宽度

没有border-box：

clientWidth=width + padding

与border-box：

clientWidth=width - border