盒模型四层为content、padding、border、margin；width/height默认仅控制content，总尺寸受box-sizing影响：content-box下总宽=width+2×padding+2×border，border-box下width即占位宽。
盒模型的四个层级怎么对应到实际代码
浏览器渲染元素时，width 和 height 默认只控制内容区（content），不是你“看到的整个方块”的大小。边框（border）、内边距（padding）和外边距（margin）是额外叠加的——这是初学者最常误判尺寸的根源。
-
box-sizing: content-box（默认）：改width不影响 border/padding，总宽 = width + padding × 2 + border × 2 -
box-sizing: border-box：改width就是最终占位宽度，padding 和 border 从这个宽度里“抠”出来 - 全局重置建议写成
* { box-sizing: border-box; }，但注意<input>、<button></button>等表单控件在某些旧版 Safari 中可能表现异常
margin 合并（collapsing）为什么让布局“消失”了
相邻块级元素的垂直 margin 会合并，取两者中较大值，而不是相加。这不是 bug，是 CSS 规范明确规定的；但它会让两个 <div> 看起来“没空隙”或“空隙比预期小”，尤其在动态插入内容后更难排查。<ul>
<li>常见触发场景：父容器没 <code>border/padding/inline-block 等隔离条件，子元素 margin-top 会“冒泡”到父容器顶部
padding: 1px 或 overflow: hidden，看子元素是否“归位”display: flex 是规避该问题的常用手段border-box 下 padding 影响 background-position 吗
不影响。无论 box-sizing 如何设置，background-position 的参考原点始终是 content box 的左上角（除非显式用 background-origin 修改）。但 padding 区域仍会显示背景——因为默认 background-clip: border-box。
- 想让背景只铺在 content 区？加
background-clip: content-box - 想让背景延伸到 border 下？需要
background-clip: border-box（默认）+background-origin: border-box - 注意：IE9+ 支持
background-clip，但 IE8 及更早版本不支持，且无 polyfill
用 JavaScript 读取真实盒尺寸别直接信 offsetWidth
offsetWidth 返回的是四舍五入后的整数像素值，且依赖当前渲染状态。如果元素被 display: none 或处于 document fragment 中，它返回 0；如果刚插入 DOM 但样式未生效（比如 class 刚加完还没重排），也可能不准。
立即学习“前端免费学习笔记（深入）”；
- 安全读取方式：用
getBoundingClientRect()，它返回浮点精度，且包含相对于视口的位置信息 - 要获取 content 区尺寸？别靠减法算，用
getComputedStyle(el).width+parseFloat()，再配合padding和border值反推 - 动画中频繁读取会触发同步重排（forced layout），性能杀手。应批量读取、缓存结果，或用
ResizeObserver替代轮询
盒模型本身很简单，但它的规则和浏览器实现细节交织在一起，尤其在响应式、动画、跨浏览器适配时，一个没注意的 box-sizing 或一次没防住的 margin 合并，就可能让页面错位几像素——而这几像素，在高密度 UI 或精确对齐场景里，就是 bug。
