卡片式简历应使用语义化section标签划分模块，配合dl实现术语-解释布局，flex实现响应式双栏，打印时禁用背景与阴影以确保结构完整。
用 section + 类名控制卡片边界，别套 div 堆砌
卡片式简历的核心不是“加阴影边框”，而是让每个模块（如教育、经历）有明确的视觉容器和语义边界。section 标签天然适合这个角色，它告诉浏览器“这是一块独立主题内容”，也方便后续用 CSS 单独控制间距、背景、圆角等。常见错误是全用 div 包裹，结果样式全靠 class 名硬撑，后期增删模块时 margin/padding 容易错乱。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每个模块用
<section class="education"></section>、<section class="experience"></section>这类带语义的 class，避免card-1、block-a这种无意义命名 -
section内部必须包含<header><h2>教育背景</h2></header>，既强化可访问性，又为标题统一加样式留接口 - 所有
section设统一基础间距：margin-bottom: 1.5rem; padding: 1.25rem; border-radius: 8px;，再按需覆盖背景色或阴影 - 别在
section上写死宽高——卡片式布局依赖内容自然伸缩，固定height会导致文字截断或空白溢出
卡片内信息用 dl 替代 table 或浮动 div
很多人想实现“左标签右内容”的紧凑排版，就去用 table 或 float，结果响应式一塌糊涂，打印 PDF 时标签和值分离。其实 dl（definition list）才是语义最匹配的方案：它专为“术语+解释”结构设计，天然支持移动端堆叠，CSS 控制灵活。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 教育经历这样写：
<dl> <dt>学校</dt> <dd>清华大学</dd> <dt>专业</dt> <dd>计算机科学与技术</dd> </dl> - 用
dl dt { width: 6rem; font-weight: 600; }控制标签宽度，dl dd { margin-left: 6rem; }实现对齐，比grid-template-columns: 6rem 1fr更轻量且兼容老浏览器 - 手机端直接加
@media (max-width: 768px) { dl dt, dl dd { display: block; margin-left: 0; } }，自动转为上下排列 - 绝对不要用
table做简历主体——HR 系统解析时会把td当纯文本切碎，关键字段（如“2022.09–2026.06”）可能被丢进错误字段
响应式卡片布局只用一个断点，flex 比 grid 更稳
所谓“卡片式”，常指左侧个人信息卡片 + 右侧主内容卡片的双栏布局。但很多教程一上来就上 grid，设三列、自适应轨道，反而在 Safari 或旧版 Edge 里错位。实际项目中，display: flex 配合简单媒体查询更可靠，尤其在打印 PDF 和导出时表现一致。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 默认移动端堆叠：
.resume-container { display: flex; flex-direction: column; } - 768px 起改为横向：
@media (min-width: 768px) { .resume-container { flex-direction: row; gap: 1.5rem; } } - 左侧卡片（如头像、联系方式）设
flex: 0 0 240px，防止被压缩；右侧主内容设flex: 1自适应剩余空间 - 避免用
grid-template-areas写复杂布局——它在@media print中支持差，PDF 导出工具（如 wkhtmltopdf）常忽略区域定义，导致内容重叠
打印 PDF 前必须关掉背景和阴影，否则白纸变灰
卡片式简历最大的翻车点不在屏幕显示，而在打印或导出 PDF 时：灰色背景变成整页灰块，阴影变成糊成一片的黑边，甚至某些浏览器（如 Chrome）默认不打印背景色，导致卡片“消失”。这不是样式没写对，而是没做打印适配。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 加专用打印样式：
@media print { section { background: white !important; box-shadow: none !important; color: #000 !important; } } - 所有卡片背景色改用
background-color: #fff显式声明，别依赖继承或透明度 - 移除
background-image和渐变，它们在多数 PDF 工具中渲染失败或变黑 - 测试导出前，在 Chrome 打开开发者工具 → Print preview，勾选 “Background graphics”，看是否还有残留灰块——这是最容易被忽略的细节
section 在不同设备、不同导出方式下都保持结构完整。那些看似炫酷的动效、渐变、悬停放大，反而会在 HR 系统解析、ATS 抓取、PDF 打印时率先失效。先保结构，再谈样式。 
