圆点指示器居中偏移因父容器未设 position: relative，absolute 会相对于 viewport 定位；应设父容器为 relative，子元素用 absolute + left: 50% + transform: translatex(-50%) 居中。
圆点指示器用 position: absolute 居中为什么总偏移？
因为父容器没设 position: relative，absolute 会逐级往上找最近的定位祖先，找不到就相对于 viewport 定位——这时圆点根本不会随轮播容器移动，更谈不上居中。
实操建议：
- 给轮播外层容器（比如
.carousel）加上position: relative - 圆点容器（如
.dots）设position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%) - 避免用
margin-left: -XXpx硬算宽度居中，圆点数量动态时会失效
圆点点击后如何高亮当前项？CSS 里怎么写最稳？
别只靠 :hover 或 JS 切 class 名，容易和轮播自动切换逻辑冲突。核心是让「当前激活态」由 JS 控制 class，CSS 只负责样式响应。
实操建议：
- JS 统一管理，每次切换后给对应
.dot加active类，其他移除 - CSS 写
.dot.active { background-color: #007bff; }，别用.dot:nth-child(2)这类静态选择器 - 如果用 CSS 变量控制颜色，确保 JS 更新
style.setProperty('--active-color', ...)后，.dot.active能读到新值
响应式下圆点间距太挤或太散，怎么弹性缩放？
固定 width/height + margin 在小屏上必然重叠；全用 rem 或 % 又难控最小可点区域（触屏需 ≥44px）。
实操建议：
- 圆点本身用
min-width: 8px; width: max(8px, 2vw)（Chrome/Edge/Safari 支持），兼容老浏览器则用@media分段 - 间距用
gap: clamp(8px, 3vw, 16px)（推荐），比margin更干净，且能限制上下限 - 移动端优先保证可点性：确保
.dot的最终尺寸 ≥44px，哪怕视觉上略大
轮播图在 Safari 上圆点闪烁或错位，常见原因是什么？
Safari 对 transform 和 will-change 的触发时机更敏感，尤其配合 opacity 动画或频繁 class 切换时，容易出现渲染抖动。
实操建议：
- 给圆点容器加
will-change: transform（仅当真有动画时），但别加在每个.dot上 - 避免在
transition中同时写background-color和transform，Safari 可能不同步重绘 - 如果用了
translateX(-50%)居中，确保父容器宽度不因内容重排而抖动（比如图片没设宽高导致加载后回流）
position: absolute 的参照系和 Safari 的渲染节奏，稍不注意就会在某个机型上突然失灵。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
