html和css 盒子大小问题

我写的是width:200,为什么到浏览器中运行后测量出来是220px？ 求解

因为浏览器有默认的页边距，把所有的页边距都设置为0，padding：0；margin：0

可能是你那个测量的不准？

因为 css 的 box-sizing 的默认值为content-box，而 content-box 的计算方式 并不是你实际 设置的 width 与height；
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
如果你想改变计算方式 可以把 box-sizing 改为 border-box，这样你所设置的width 就是实际的 width ，而 margin padding border 会把你的实际content 往里面挤

body和div之间有默认边距，把css代码分离出来，在最顶部加上一句 * {margin:0;padding:0} ，清除所有标签默认边距，开发中都要写这一句，有帮助的话采纳一下哦！🙊🙊🙊