getboundingclientrect 返回元素相对于视口左上角的坐标，包含 left、top、right、bottom、width、height；受滚动、缩放、iframe 嵌套及 css transform 影响，需谨慎用于定位。
getBoundingClientRect 返回的是什么坐标？
它返回的是元素相对于视口（viewport）左上角的 left、top、right、bottom、width、height，不是相对于父容器或文档的坐标。编辑器里常误用 getBoundingClientRect() 直接算工具栏位置，结果悬浮栏总偏移——因为没考虑滚动、缩放、iframe 嵌套或 CSS transform 影响。
- 滚动后
top值变小，但工具栏若用绝对定位且未随滚动更新，就会“粘”在错误位置 - 编辑器容器有
transform: scale(0.9)时，getBoundingClientRect()的值已自动按缩放校正，但后续手动计算 offset 时若再除以 scale，就重复校正了 - 如果编辑器在
<iframe></iframe>里，必须在 iframe 内部调用，跨域时会抛出SecurityError
怎么让工具栏紧贴光标或选区下沿？
光标位置不能直接读取，得靠 getSelection() + range.getClientRects()。选区可能跨多行，getClientRects() 返回多个矩形，取最后一个（通常是光标所在位置）更稳妥。
const selection = window.getSelection();
if (selection.rangeCount > 0) {
const range = selection.getRangeAt(0);
const rects = range.getClientRects();
if (rects.length > 0) {
const lastRect = rects[rects.length - 1];
const { bottom, left, right } = lastRect;
// 工具栏 top = bottom + 4，left = (left + right) / 2 - toolbarWidth / 2
}
}
-
range.getClientRects()在空行或折叠选区时可能返回空数组，需 fallback 到光标所在节点的getBoundingClientRect() - 移动端 Safari 对
getClientRects()支持不稳定，有时只返回一个极小矩形，建议加兜底：检测 rect 面积width * height 时重试或用节点边界 - 避免每 keystroke 都调用，可节流到
selectionchange事件，但要注意该事件不触发于 programmatic selection（如 execCommand 后）
为什么工具栏总在边缘被裁剪或错位？
常见原因是没做视口边界校验和滚动容器适配。编辑器常嵌在 overflow: auto 的容器里，而 getBoundingClientRect() 只认视口，不认局部滚动。
- 先确认工具栏的定位上下文：是 relative 到编辑器容器，还是 fixed 到 viewport？前者必须把容器滚动偏移（
scrollTop/scrollLeft）从坐标中减掉 - 计算完目标位置后，用
window.innerWidth和window.innerHeight检查是否超出右/下边界；超出时优先左对齐（left = right - toolbarWidth），而非简单 clamp - 如果编辑器用了
position: sticky或contain: layout，某些浏览器下getBoundingClientRect()会返回异常值，可临时移除contain再测
resize 和 zoom 变化时如何自动重算？
浏览器缩放（Ctrl+/-）、窗口 resize、甚至字体加载都可能改变布局，但 resize 事件不触发于缩放，zoom 事件已废弃，只能监听 scroll、resize 和 orientationchange，再加一层防抖检测尺寸变化。
- 用
matchMedia('(min-resolution: 1dppx)')检测缩放变化（虽不精确但兼容性好） - 监听
window.visualViewport的resize事件（Chrome/Edge 支持），它能捕获 pinch-zoom 和 desktop 缩放 - 避免直接监听
scroll，改用IntersectionObserver观察编辑器容器是否进入视口，再触发重算——减少无意义调用
最麻烦的其实是字体加载完成前的 reflow：工具栏按初始宽高定位，等 font-display: swap 字体渲染后，行高突变，光标位置偏移。这时候得等 document.fonts.ready 或用 ResizeObserver 监听编辑器内容区域高度变化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
