默认width/height仅控制content区尺寸，总宽度=width+左右padding+左右border；box-sizing:border-box使width包含padding和border；margin不属于盒模型，不影响offsetwidth等计算。
默认情况下 width 和 height 只算 content 区域
很多人一上来就写 width: 200px，以为元素就占 200px 宽，结果发现布局错位、溢出容器——问题就出在这里：width 和 height 默认只控制内容区（content）尺寸，不包含 padding、border、margin。
比如：div { width: 200px; padding: 10px; border: 2px solid #000; margin: 5px; }，这个 div 实际占用的水平空间是：
-
200px（内容宽） - +
10px + 10px（左右padding） - +
2px + 2px（左右border） - +
5px + 5px（左右margin）
合计 234px。但注意：margin 不属于元素“自身盒子”的一部分，它只是外推空间；所以严格说，元素盒模型的总宽度 = width + padding-left + padding-right + border-left-width + border-right-width。
box-sizing: border-box 改变计算逻辑
想让 width: 200px 真正表示“整个盒子宽 200px”，就得用 box-sizing: border-box。这时浏览器会把 padding 和 border 往里扣，自动缩减 content 区域。
示例：div { width: 200px; padding: 10px; border: 2px solid #000; box-sizing: border-box; } → content 宽度实际是 200 - 20 - 4 = 176px，但整个盒子（含 padding 和 border）正好 200px。
常见踩坑点：
- 没重置全局
box-sizing，导致不同浏览器/组件行为不一致 - 对表单元素（如
input、textarea）漏设box-sizing，它们默认是content-box，加了padding就撑破父容器 - 用了
border-box却忘了margin依然在外，仍需单独计算留白
margin 不参与盒模型尺寸计算
这是最容易混淆的一点：虽然 margin 影响元素在页面上的最终占位（比如两个相邻 div 的间距），但它**不属于该元素盒模型的组成部分**，也不计入 offsetWidth 或 getBoundingClientRect().width 返回值。
验证方式：
- 用浏览器开发者工具选中元素，看 computed 样式里的
width、padding、border值，再手动加总，和offsetWidth对得上 - 但
margin值不会出现在那个总和里，它只影响 layout flow 和相邻元素距离 - flex 或 grid 容器中，
margin甚至可能被折叠（collapse）或忽略（如 flex item 的margin-top/bottom在某些场景无效）
动态计算时别硬套公式，优先用 JS API
手算容易漏项，尤其遇到 em、rem、百分比、calc() 混用时。真要获取真实渲染尺寸，直接读 DOM 属性更可靠：
-
element.offsetWidth：返回元素的**布局宽度**（content + padding + border），不含 margin -
element.getBoundingClientRect().width：返回相对于视口的精确浮点宽度，含 subpixel，也**不含 margin** - 需要包含 margin？只能手动加
parseFloat(getComputedStyle(element).marginLeft) + ...，但要注意单位转换和计算时机（必须在 layout 完成后）
真正难的不是公式本身，而是什么时候该用 content-box（比如做动画缩放 content 区）、什么时候必须切到 border-box（比如栅格系统、卡片固定宽高），以及哪些元素天生不守规则（button、select 的默认 box-sizing 和内建 padding 经常不一致）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
