flex布局最稳，卡片容器设display: flex + align-items: center，图标、数值、标题、趋势箭头作为flex item；数值变色用.stat-up/.stat-down类切换，响应式仅设移动端堆叠与桌面端横排两断点。
卡片基础结构用 flex 布局最稳
直接用 display: flex 控制卡片内部元素对齐，比浮动或 inline-block 更可靠。后台统计卡片通常含图标、数值、标题、趋势箭头四部分，用 flex 可避免换行错位和 baseline 对齐问题。
常见错误是给子元素设 float: left 或滥用 vertical-align，结果在 Safari 或旧版 Edge 中数值和图标上下偏移。正确做法是让卡片容器设 display: flex + align-items: center，图标和文字都作为 flex item 存在。
- 图标用
font-size和margin-right控制间距，别依赖padding微调 - 数值文字建议用
font-weight: 600，避免用bold—— 某些字体里bold渲染过粗 - 趋势箭头（↑/↓）用
color区分正负，别用不同字体图标，否则宽高不一致易导致 baseline 错乱
数值动态变色要靠 class 切换，别写内联 style
后台卡片常需根据数值正负自动变红/绿，但直接在 JS 里拼 style.color = 'red' 会覆盖其他 color 样式，且无法响应暗色模式。
推荐方案：预设两个 class，比如 .stat-up 和 .stat-down，JS 只负责切换 class 名，CSS 控制颜色和箭头方向：
.stat-value {
transition: color 0.2s;
}
.stat-up .stat-value { color: #1890ff; }
.stat-down .stat-value { color: #f5222d; }
.stat-up .trend-arrow::before { content: "↑"; }
.stat-down .trend-arrow::before { content: "↓"; }
注意：不要用 :hover 模拟状态，真实数据状态必须由 class 驱动；也别用 CSS 自定义属性（--color）做条件色，IE 不支持，且逻辑分散难维护。
响应式断点只设 2 个：移动端堆叠，桌面端横排
后台统计卡片在小屏上强行横排会导致文字折行、图标挤压，用户根本看不清数字。实际项目中，90% 的后台系统只需区分「
- 移动端统一用
flex-direction: column，图标在上、数值居中、标题靠下 - 桌面端用
flex-direction: row，并加gap: 12px（别用 margin 模拟 gap，父子 margin 折叠难调试） - 数值字体大小用
clamp(1rem, 4vw, 1.5rem)，比媒体查询更平滑，但注意 Safari 14.1 以下不支持，得 fallback 到 media query
阴影和边框别用 box-shadow 模拟边框
很多人为了“高级感”给卡片加 box-shadow: 0 2px 8px rgba(0,0,0,0.08)，再额外加 border: 1px solid #f0f0f0，结果在高缩放比屏幕（如 125% DPI）下阴影模糊、边框虚化，视觉发虚。
真正轻量又清晰的做法：去掉 border，用 box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.05) —— 第二段模拟 1px 边框，同时保持阴影层次。
- 阴影颜色用
rgba而非hsla，后者在 Chrome 旧版本有渲染差异 - 卡片圆角统一用
border-radius: 6px，别设成8px或12px，后台 UI 一致性优先于“设计感” - 如果卡片要悬浮效果（如 hover 上浮），只加
transform: translateY(-2px)，别叠加更多阴影，否则性能掉帧
卡片的复杂度不在样式本身，而在它要承载实时数据、适配多端、响应主题切换。把结构、状态、响应、视觉这四层拆开控制，比堆砌 CSS 属性更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
