关键在容器定位、伪元素交互和激活态控制三处：需设display:flex+flex-wrap:nowrap、min-width防塌缩、flex:0 0 auto禁伸缩、gap控距；hover失效主因是伪元素pointer-events:none或z-index遮挡；激活态靠JS切.active类，CSS用尺寸/颜色区分，移动端弃:hover改:active或touch。
轮播图指示点样式本身不难写，但真正能稳住不崩的，关键在容器定位、伪元素交互和激活态控制这三处。
圆点水平居中不换行，为什么加了 justify-content: center 还是挤成两行？
根本原因是 flex 容器没锁死行为：子项可能被 margin 推开，或父容器宽度不足导致折行。必须组合使用以下约束：
-
display: flex+flex-wrap: nowrap是底线，缺一不可 - 父容器设
min-width（比如min-width: 200px），防塌缩 - 所有圆点用
flex: 0 0 auto，禁止伸缩 - 间距优先用
gap: clamp(8px, 3vw, 16px)，比给每个点加margin-right更可靠 - 加
overflow: hidden防意外溢出
:hover 变色失效，点不上去或颜色错位，常见原因是什么？
本质是事件目标没落在圆点上。最常踩的坑有两类：
- 用了
::before或::after画圆点，但伪元素默认pointer-events: none，得显式加pointer-events: auto - 轮播其他层（如遮罩、箭头）
z-index更高，把圆点盖住了；需确保圆点容器有position: relative和足够高的z-index（比如z-index: 10） - 别依赖伪元素变色——直接在圆点元素上写
background-color，避免 hover 时尺寸抖动
怎么用纯 CSS 区分当前激活点和未激活点？
CSS 本身无法自动识别当前页，但样式响应可以极简。核心是让 JS 控制 .dot.active 类，CSS 只负责渲染：
立即学习“前端免费学习笔记（深入）”；
- 激活点推荐：
width: 12px; height: 12px; background-color: #333; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #333 - 未激活点推荐：
width: 8px; height: 8px; background-color: rgba(0,0,0,0.2)（别用opacity，否则 hover 也变淡） - 移动端要弃用
:hover，改用:active或监听 touch 事件，否则点击无反馈
真正难的不是画几个圆，而是当轮播数量动态变化、屏幕尺寸缩放、Safari 渲染节奏不同步时，指示点还能对齐、可点、不闪烁。这些边界情况，往往在 position: absolute 的参照系和 transform: translateX(-50%) 的触发时机上悄悄出问题。
