我做错了什么，还是有这种行为的原因？
编辑：我知道这是应该如何工作，我的问题是为什么？它是逻辑的，我不明白的方式吗？这是否提供任何优势，相反的方法保持大小和padding分开？
解决方法
Box-sizing: border-Box; ms-Box-sizing: border-Box; webkit-Box-sizing: border-Box; moz-Box-sizing: border-Box; width: 200px;
在你的div的CSS。然后，在现代浏览器中，div将始终保持200 px宽，不管是什么。有关详细信息和支持的浏览器列表，请参阅this guide。
编辑：WRT你的编辑为什么传统的盒子模型是它是，维基百科实际上offers some insight：
Before HTML 4 and CSS,very few HTML elements supported both border and padding,so the definition of the width and height of an element was not very contentIoUs. However,it varied depending on the element. The HTML width attribute of a table defined the width of the table including its border. On the other hand,the HTML width attribute of an image defined the width of the image itself (inside any border). The only element to support padding in those early days was the table cell. Width for the cell was defined as “the suggested width for a cell content in pixels excluding the cell padding.”
CSS introduced margin,border and padding for many more elements. It adopted a definition width in relation to content,border,margin and padding similar to that for a table cell. This has since become known as the W3C Box model.
