用语义化构建数据卡片：为指标名（小号灰色），内用flex布局使右对齐、左对齐且不换行，单位设white-space:nowrap；趋势图标用::before插入，正负色通过预设class控制。
用纯 HTML + CSS 实现数据卡片，不需要 JS 就能渲染静态值
数据卡片本质是语义化容器 + 视觉分层，HTML 只负责结构，CSS 控制样式。面试中常被要求手写一个「带标题、数值、趋势图标、单位」的卡片，重点考察对 <dl></dl>、<dt></dt>、<dd></dd> 的语义理解，以及 flex 布局和字体层级控制能力。
常见错误是滥用 <div> 套娃，或把数值和单位写死在同一个 <code><p></p> 里导致响应式断裂。正确做法是：
- 用
<dl></dl>包裹整张卡片：语义上表示“定义列表”，天然适合“指标名 → 指标值”关系 -
<dt></dt>放指标名称（如“月活用户”），设为小号灰色字体 -
<dd></dd>放主数值，用大号加粗字体；内部再嵌套<span class="unit"></span>包单位（如“万人”），方便单独控制字号/颜色 - 趋势图标（↑ ↓）用伪元素
::before插入，避免污染 HTML 结构
CSS 中如何让数值自动右对齐、单位左对齐又不换行
这是最常卡住的地方：数值要大而醒目，单位要小而克制，但必须保持在同一视觉行内。不能靠 float 或绝对定位硬拉，会破坏可访问性。
推荐用 flex + min-content 配合：
- 给
<dd></dd>设display: flex; justify-content: flex-end; - 数值用
<span class="value"></span>包裹，设margin-right: 0.25em;留白 - 单位
<span class="unit"></span>设font-size: 0.6em; line-height: 1;，并加white-space: nowrap; - 关键：给
<dd></dd>加width: min-content;，防止 flex 容器撑满父宽导致单位被挤到下一行
面试时遇到“要支持正负趋势色”怎么快速响应
别急着写 JS 判断，先看需求是否允许服务端输出 class。90% 的面试题只要求静态样式适配，而非实时计算。
直接在 HTML 中根据数据预设 class：
CSS 里用属性选择器或 class 分离样式：
.trend-up .value { color: #17bf63; }.trend-down .value { color: #e03131; }- 趋势箭头用
.trend-up::before { content: "↑"; }，同理处理 ↓ - 如果面试官追问“动态插入”，再说明可用
dataset+classList.toggle()，但强调：静态卡片优先走语义 class
移动端适配时最容易忽略的三个细节
卡片在手机上缩成一团、文字叠在一起、单位消失——不是媒体查询没写，而是基础布局没压住。
- 主数值字体用
rem，但必须配合根字体大小重置：html { font-size: clamp(14px, 4vw, 16px); }，避免小屏下数值过大溢出 -
<dl></dl>默认有上下 margin，在卡片容器里要用margin: 0;清掉，否则卡片间留白不可控 - 单位
.unit的font-size要用em（相对父元素），而不是rem，否则当主数值缩小时单位不会同比例缩小
真正难的不是写出卡片，是让每个字符都落在它该在的位置，且不依赖 JS 干预。面试官盯着你看怎么处理单位对齐、趋势色切换、小屏断行——这些细节比动画效果更能暴露基本功。
