记一次重温CSS盒模型遇到的疑惑

我今天在重温CSS盒模型时突然产生了一次懵逼，因为我发现chrome上发现这样一个【疑问】。

【疑问】：W3C盒模型说【宽度=正文内容】那么为啥这个尺寸是220220不是200200。
抱着这样的疑问，我开始了一次给自己解疑的路程。

首先我明确了一个知识点，一直以来我看过的盒模型文章都是告诉我：
W3C盒模型【width=content】
IE盒模型【width=content+padding+border】
记着这样的知识点，我分别给div添加了【box-sizing: border-box】和【box-sizing: content-box】

从如上两图我发现，因为我的【宽度】和【内边距】是固定的，所以我的content一直在变化。
content-box时是200200
border-box时是180180
由此我可以断定，首先，知识点是没有错的，但是问题发生在哪，我看着这个图深思，突然有个想法冒出来，好像我一开始的认定就是错误。
首先，这个尺寸图没说代表的是元素的宽度，它代表的是元素的总尺寸，想到这里，我突然发现知识点串起来了，这就突然解决了我产生的疑惑，现在想想，这次的疑惑才是真正的解决了我对CSS盒模型的理解。