Chrome DevTools 的 display 面板需手动开启 Layout 侧边栏（右键标签栏勾选），仅在 Elements 面板选中元素后生效；CSS-in-JS 样式可能不被识别，需查 Styles 面板；outline 不占布局空间适合临时标记，border 触发重排但反映真实盒模型；getBoundingClientRect() 返回视觉位置，但受合成层、包含块影响；CSS 自定义属性修改需作用于正确作用域（如 :root）才全局生效。
Chrome DevTools 里 display 面板为什么点不动？
因为默认不显示，得手动打开「Layout」侧边栏。很多开发者以为它一直存在，实际要右键顶部标签栏 → 勾选 Layout 才能调出 display、flex、grid 的实时可视化控件。
- 只在 Elements 面板选中一个元素后，
Layout面板才生效；换元素需重新点击 -
display: grid元素会自动高亮网格线，但display: flex默认不标出主轴方向，得点开面板里的Flex开关 - 如果页面用了 CSS-in-JS（比如 Emotion），部分样式可能被包裹在
data-emotion属性下，Layout面板无法识别，得切到 Styles 标签看计算值
outline 和 border 调试时到底该用哪个？
outline 不占布局空间，适合临时标记焦点或定位元素位置；border 会触发重排，但能真实反映盒模型变化。调试错位时，混用反而容易误判。
- 查元素是否被裁剪？用
outline: 2px solid red—— 它不会撑开父容器，一眼看出溢出边界 - 查 margin 折叠？必须用
border，因为outline完全绕过盒模型计算 - 用
outline时别依赖outline-offset精确定位，不同浏览器渲染有 1–2px 偏差
用 transform: translate() 移动元素后，为什么 getBoundingClientRect() 还是原位置？
因为 getBoundingClientRect() 返回的是渲染后的视觉位置，但某些场景下（比如 transform 未触发合成层、或元素被父级 overflow: hidden 截断），返回值可能滞后于视觉表现。
- 确保元素已触发硬件加速：加
will-change: transform或transform: translateZ(0) - 检查父容器是否有
overflow: hidden+transform组合，这会创建新的包含块，getBoundingClientRect()以它为参考系 - 想获取绝对视口坐标？别链式调用
offsetParent，直接用element.getBoundingClientRect().top + window.scrollY
CSS 自定义属性（--var）在 DevTools 里改了没反应？
不是失效，是作用域没对上。自定义属性遵循继承和级联规则，修改的位置必须是变量定义处的祖先节点，或者用 :root 显式覆盖。
立即学习“前端免费学习笔记（深入）”；
- 在 Styles 面板里直接编辑
--color-primary: blue，只影响当前选中元素及其后代，不影响兄弟节点 - 想全局生效？右键
:root→ «Edit as HTML»，把变量写进<style></style>块里，或者在 Console 执行document.documentElement.style.setProperty('--color-primary', 'blue') - 变量值含空格或特殊字符（如
var(--size) / 2）时，DevTools 编辑框会报错，得先删掉再重输，不能直接修改
