促销标签应使用 span；因其是行内语义补充，用 div 易破坏行高、引发换行或 margin 塌陷，尤其在移动端多行标题中；正确做法是 span 配合 display: inline-block、transform 定位及 flex 布局控制多状态排列与倒计时性能优化。
促销标签用 span 还是 div？
直接用 span。促销标签本质是行内语义补充，比如“限时8折”“第二件0元”，它依附于价格、商品名等文本存在，不是独立区块。用 div 容易破坏行高、触发不必要的换行或 margin 塌陷，尤其在移动端多行标题里更明显。
常见错误：把标签写成 <div class="tag">新品</div>，结果和旁边价格错位、垂直居中失效、或者在 Flex 容器里撑开高度。
- 始终用
span，加display: inline-block控制尺寸和对齐 - 避免设置
width或height固定值，让内容自适应 - 若需绝对定位（如右上角角标），父容器必须设
position: relative
position: absolute 角标怎么不遮挡文字？
右上角“热”“NEW”类标签最容易盖住价格数字或按钮图标。核心不是调 z-index，而是控制偏移量和边界。
典型错误：只写 top: 0; right: 0;，结果标签紧贴父容器边缘，和右侧“加入购物车”按钮重叠。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 给角标加
transform: translate(50%, -50%)，再配top: 0; right: 0;，让它真正锚点在右上角 - 父容器预留安全边距：比如价格区域右侧留
padding-right: 24px，刚好容纳常见标签宽度 - 用
max-width: 60px+white-space: nowrap+overflow: hidden防止长文案溢出
多状态标签（如“满减+包邮+赠品”）如何避免堆叠混乱？
一个商品同时有多个促销时，横向排列比竖排更省空间，但容易挤在一起看不清。关键不是靠 JS 动态计算宽度，而是用 CSS 弹性流自然约束。
错误做法：每个标签设固定 margin-right，结果小屏下换行错乱、间距不一致。
- 用
display: flex包裹所有标签，设flex-wrap: wrap允许折行 - 单个标签用
flex-shrink: 0防止被压缩变形 - 标签间用
gap: 4px（注意兼容性：IE 不支持，可降级为margin-right+:last-child清除） - 最多显示 2 行，超出用
display: -webkit-box截断（iOS Safari 支持良好）
“限时折扣”动态倒计时怎么嵌入标签不卡顿？
倒计时本身不难，但直接往标签里塞 setInterval 更新 innerHTML，会导致频繁重排，尤其在列表页滚动时掉帧。
常见问题：“还剩 02:15:33”每秒刷新一次，整个商品卡片闪烁、安卓低端机明显卡顿。
- 只更新倒计时的数字部分，用独立
span包裹小时/分钟/秒，例如<span class="countdown-hour">02</span>:<span class="countdown-minute">15</span> - 用
requestAnimationFrame替代setInterval，保证只在浏览器重绘前更新 - 时间格式化逻辑提前算好，避免每次更新都调用
Date.prototype.toLocaleString() - 页面不可见时（
document.hidden === true）暂停定时器，切回来再恢复
复杂点在于倒计时结束后的样式切换——比如从红色“限时”变成灰色“已结束”，这个状态不能只靠前端判断，必须和服务端返回的 end_time 时间戳比对，否则用户手动改系统时间会导致状态错乱。
