角标应使用 transform: translate(50%, -50%) 配合 top: 0; right: 0; 实现精准居右上角；数量为 0 时必须用 display: none; 隐藏；尺寸统一用 em/rem 等相对单位并设圆角为 50%；z-index 与 pointer-events 需协同设置以防遮挡交互。
角标位置偏移不居中？用 transform 替代 margin
直接写 top: 0; right: 0; 很容易让角标贴边后视觉偏高或偏右，尤其在不同字体、行高下表现不一致。用 transform: translate(50%, -50%); 配合 top: 0; right: 0; 才能真正居右上角。
常见错误是只靠 margin 调整，结果在 iOS Safari 或 Chrome 移动端渲染错位。正确做法：
- 角标元素设
position: absolute; - 父容器（如购物车图标）设
position: relative; - 角标加
top: 0; right: 0; transform: translate(50%, -50%); - 避免用
line-height或padding模拟居中，不可控
数量为 0 时要不要隐藏？用 display: none 还是 visibility: hidden？
显示逻辑必须和业务状态同步：数量为 0 时角标应完全不占空间，否则会撑开父容器或影响点击热区。用 display: none; 是唯一可靠选择。
visibility: hidden 仍保留布局空间，opacity: 0 会拦截 pointer-events（除非额外加 pointer-events: none;），都容易引发交互问题。
- JS 更新数量后，动态切换
cart-badge元素的display值 - 不要依赖 CSS :empty 伪类——DOM 中常有空格或注释，导致匹配失败
- 服务端渲染时就该控制是否输出角标 HTML，避免 JS 补救
响应式缩放失效？用 em 或 rem 控制字号与尺寸
固定写 font-size: 12px; 在高清屏或缩放页面下会模糊或过小。角标所有尺寸（宽高、圆角、字号）应统一用相对单位。
推荐以父元素 font-size 为基准，用 em 实现等比缩放：
`.cart-badge {
font-size: 0.75em;
width: 1.5em;
height: 1.5em;
line-height: 1.5em;
border-radius: 50%;
}`
- 避免混用 px 和 em，否则缩放时比例断裂
- 如果父容器字体大小动态变化（如通过 JS 切换主题），rem 更稳，但需确保根字体可预期
- 圆角用
50%，别用固定px值，否则在小尺寸下变成椭圆
角标遮挡图标或文字？z-index 和 pointer-events 要配对处理
常见现象：角标盖住了购物车图标本身，或者用户点不到背后的按钮。这不是 z-index 单独能解决的问题。
- 给角标加
z-index: 2;，同时确保父容器（如.cart-icon）有z-index: 1;且设position: relative; - 角标默认会拦截点击事件，必须加
pointer-events: none; - 如果角标内含可点击内容（比如清空按钮），则只对数字文本层设
pointer-events: none;，按钮单独设pointer-events: auto; - 不要假设父容器
overflow: hidden;能裁剪角标——它可能溢出到相邻 DOM 结构里
transform 的 subpixel 渲染和 Android WebView 的 z-index 层叠规则差异，得实机验证，不能只看 Chrome DevTools 模拟器。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
