统计卡片应避免用 table，正确语义结构是 article/section + h3 + p；flex 布局实现自适应排列，需设 flex-wrap、calc 宽度、min-width:0；数值用 span.stat-value 配 font-variant-numeric，单位用 small；响应式通过媒体查询调整 flex-basis 和 gap。
用 table 做统计卡片？别硬套，语义不对
直接用 <table> 包裹单个数值 + 标题，是常见但错误的做法。浏览器和屏幕阅读器会把它当“二维数据表”解析，而统计卡片本质是独立的、无行列关系的语义单元。正确做法是用 <article> 或 <section> 搭配 <h3> 和 <p> —— 它们天然表达“一个完整信息块”，且兼容性好、无障碍友好。
flex 布局实现多卡片横向自适应排列
卡片并排显示时，display: flex 比浮动或 inline-block 更可控。关键点在父容器设置 flex-wrap: wrap 和子项设置基础宽度：
- 父容器加
margin-left: -8px; margin-right: -8px，为子项留出左右 padding 空间 - 每个卡片用
flex-basis: calc(25% - 16px)（4列）或calc(33.333% - 16px)（3列），避免因四舍五入导致换行错位 - 必须设
min-width: 0防止长文本撑破卡片宽度（尤其含数字或 URL 时）
卡片内数值对齐与字体处理的坑
统计数字常需右对齐、加大字号、加粗，但直接用 <strong> 或 <b> 不够——它只改样式，不表达“这是核心指标”。推荐组合：
- 数值用
<span class="stat-value">包裹，CSS 中设font-variant-numeric: tabular-nums，保证数字等宽对齐（尤其多行对比时） - 单位或描述文字用
<small>，不是为了变小，而是语义上表示“附属说明” - 避免用
<font>标签：已废弃，且无法响应式缩放
响应式断点下卡片数量动态变化
不同屏幕宽度下，每行显示 4 / 3 / 2 / 1 张卡片，靠媒体查询调整 flex-basis 即可，但要注意：
立即学习“前端免费学习笔记（深入）”；
- 不要只写
max-width，加min-width防止超小屏下卡片挤压变形 - 在
@media (max-width: 768px)下，把flex-basis改成calc(50% - 16px)，同时确保gap也响应式缩放（如从16px降到8px） - 如果卡片含图标，图标尺寸要用
em或rem，而非固定px，否则缩放后比例失调
真正麻烦的是带图表或进度条的统计卡片——那已经超出纯 HTML 范畴，得交由 CSS 自定义属性或 JS 控制。纯静态数值卡片，按上面四点做，基本不会翻车。
