实际上，当我在这些网站上阅读两种不同的内容时，我感到困惑。我知道盒子大小及其如何影响盒子模型，但是如果我们不考虑大小并想知道元素的大小怎么办。请参阅下面的网址：
http://www.w3schools.com/css/css_boxmodel.asp
元素的总宽度应该这样计算：
元素总宽度=宽度+左填充+右填充+左边框+右边框+左边界+右边界
元素的总高度应该这样计算：
总元素高度=高度+顶部填充+底部填充+顶部边框+底边框+上边距+底边距
https://css-tricks.com/the-css-box-model/
盒子本身的尺寸是这样计算的：
Width =宽度+左填充+右填充+左边框+border-right Height =高度+顶部填充+底部填充+顶部边框+底部边框
根据我的理解，我们认为width = width + padding + border是默认框大小中元素的总宽度。
这是我在Chrome中大致观察到的内容。
如果设置* {box-sizing: border-box;}，则元素的宽度等于width + border + padding。宽度值等于devtool中显示的宽度。
并且元素的父元素的宽度（当然）包括孩子的边缘。宽度值也等于devtool中显示的宽度。但是您在计算时需要注意保证金崩溃。
但是，例如，如果最顶层的元素margin-top折叠，从body中渲染，则多余的空白不会增加devtool中显示的框的元素高度。但是您可以使用document.getElementsByTagName('html')[0].scrollHeight来获取整个高度。