元素实际宽度取决于box-sizing：content-box下为width+padding+border，border-box下为设定width+margin；margin不属元素自身尺寸但影响占位，调试应以offsetWidth和getBoundingClientRect()为准。
元素的实际宽度不是你写的 width 值，而是它在页面中真正“占多少地方”——这取决于盒模型类型、padding、border 和 margin 是否参与计算。默认情况下，width 只管内容区，加了内边距和边框就会撑大；换成 box-sizing: border-box 后，width 才是你看到的总宽（不含 margin）。
content-box 下的宽度怎么算
这是浏览器默认行为。你设 width: 200px，只是内容区宽 200px；只要加了 padding 或 border，实际占据空间就变大。
- 公式：实际占据宽度 =
width+ 左右padding+ 左右border+ 左右margin -
margin不属于元素自身尺寸，但会影响布局位置，必须计入“占位宽度” - 常见踩坑：给一个
width: 100%的容器加padding: 20px，结果内容溢出——因为 100% 是父容器内容宽，再加 padding 就超了 - 调试建议：用浏览器开发者工具选中元素，看右侧
Computed面板里的width和offsetWidth，后者才是真实像素值
border-box 下的宽度怎么算
设置 box-sizing: border-box 后，width 指的是从左 border 边到右 border 边的总宽，padding 和 border 全部被“挤进”这个宽度里。
- 公式：实际占据宽度 = 设定的
width+ 左右margin - 内容区宽度自动收缩：比如
width: 200px; padding: 15px; border: 2px solid #000→ 内容区只剩200 - 2×15 - 2×2 = 166px - 强烈建议全局重置：
* { box-sizing: border-box; }，避免不同组件盒模型不一致导致的对不齐问题 - 注意：
box-sizing不继承，但*选择器能覆盖所有元素（含伪元素），所以别漏掉*::before, *::after
margin 为什么不算进元素自身宽高
margin 是盒子外部的空白，它不渲染背景、不响应鼠标事件、不触发滚动条，只负责“推走邻居”。所以 offsetWidth 和 getBoundingClientRect().width 都不包含 margin。
立即学习“前端免费学习笔记（深入）”；
- 但
getBoundingClientRect()返回的是相对于视口的绝对位置和尺寸，它的width值 =border-box 宽度 + 左右 margin - 而
offsetWidth=border-box 宽度（不含 margin） - 垂直方向还有 margin 合并（collapse）：相邻块级元素的上下
margin会取最大值，不是相加——这点常被忽略，导致布局高度预估错误
真正容易被绕进去的点是：你以为改了 width 就控制了总宽，其实得先确认 box-sizing 是什么，再看有没有 margin 在外面悄悄推着它。调试时盯紧 offsetWidth 和 getBoundingClientRect() 的差异，比光看 CSS 声明靠谱得多。
