box-sizing 默认值为 content-box 导致 width 仅控制内容区宽度，不包含 padding 和 border，使元素实际宽度为 content + 2×padding + 2×border，易引发布局错误；getBoundingClientRect().width 返回 border-edge 尺寸，即 content + padding + border，不含 margin；box-shadow 和 outline 不参与盒模型计算。
box-sizing 默认值为什么让 width 行为反直觉
因为 width 默认只控制 content-box 的宽度，不包含 padding 和 border。你设 width: 200px; padding: 20px; border: 5px solid，元素实际占宽是 250px（200 + 2×20 + 2×5），但很多人以为就是 200px。
常见错误现象：用固定宽度布局时，加了 padding 后内容被挤出或换行；响应式断点失效；Flex/Grid 子项尺寸计算偏差。
- 所有现代浏览器默认都是
box-sizing: content-box -
box-sizing: border-box才让width指“最外边框总宽”，更符合视觉预期 - 全局重置推荐写法：
* { box-sizing: border-box; }，但注意它会影响::before/::after和表单控件（如input[type="search"]的默认内边距）
content-edge、padding-edge、border-edge、margin-edge 怎么对应盒模型图示
这四个词不是 CSS 标准里的“属性名”，而是规范里描述盒边界的概念术语，对应盒子每一层的外沿：
-
content-edge：内容区最外侧，即content区域的矩形边界，width/height就是它的尺寸（在content-box下） -
padding-edge：含内边距后的边界，等于content-edge外扩padding -
border-edge：再外扩border-width，也就是边框最外侧 -
margin-edge：最后外扩margin，是影响其他元素布局的真正边界（但不占自身文档流空间）
关键点：只有 margin-edge 参与外边距折叠（margin collapse），而 border-edge 才是 offsetWidth 测量的终点。
立即学习“前端免费学习笔记（深入）”；
getBoundingClientRect() 返回的 width/height 对应哪条 edge
getBoundingClientRect() 返回的是相对于视口的像素坐标，它的 width 和 height 值对应的是 border-edge 的尺寸 —— 即包含 content + padding + border，但不含 margin。
- 验证方式：给元素设
border: 10px solid red; padding: 15px; margin: 20px;，调用el.getBoundingClientRect().width，结果 =contentWidth + 30 + 20（padding 左右各 15，border 左右各 10） - 注意：如果元素有
transform，返回值仍基于未 transform 前的border-edge，只是坐标做了映射 - 不要用它来判断
margin是否生效 ——margin不影响该值
box-shadow 和 outline 算不算进盒模型边界
都不算。box-shadow 和 outline 是“绘制层”，完全不参与盒模型计算，也不影响 offsetWidth、getBoundingClientRect() 或布局流。
-
box-shadow可以溢出父容器，但不会触发父容器滚动条（除非父设了overflow: hidden） -
outline默认绕border-edge绘制，但可通过outline-offset偏移，偏移后依然不影响布局 - 陷阱：用
box-shadow模拟边框时，若后续改用border，可能因尺寸突变导致布局跳动 —— 因为前者不占空间，后者会改变border-edge
真正难的不是记住四条 edge 的名字，而是每次写 width 或读 offsetWidth 时，下意识确认当前上下文依赖的是哪一层边界 —— 尤其在混合使用 box-sizing、transform 和 scrollbar-gutter 的时候。
