css边框框处于活动状态时了解offsetWidth和clientWidth答案

【问题标题】：Understanding offsetWidth and clientWidth when css border-box is activecss边框框处于活动状态时了解offsetWidth和clientWidth
【发布时间】：2015-08-03 11:40:20
【问题描述】：

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

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

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

*{
  box-sizing: border-box;
}

offsetWidth 和 clientWidth 现在相等了吗？这条规则是否总是发生这种情况？

那么padding-box呢？

【问题讨论】：

标签： javascript css border-box

【解决方案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

【讨论】：

所以你说box-sizing根本没有影响，当border为0时它们总是相同的，是吗？
@Vandervals Border 为 0 是不够的，但如果 border 和 padding 都为 0，那么 box-sizing 不会改变最终结果。但如果有任何边框或填充，那么最终的结果是不同的。实际上，如果你使用border-box，你会得到你指定为width，但没有它你会得到width + padding + border。
@Vandervals 我在我的回答中添加了一个简短的摘要，说明offsetWidth 和clientWidth 的结果。