扁平化简历的核心是语义化HTML结构与极简CSS样式。需用等标签构建清晰层级，禁用box-shadow、渐变、阴影等视觉干扰，限制字体颜色为2–3种，图标用内联SVG，兼顾打印与移动端响应式。
扁平化简历不是靠“加个阴影、去个渐变”就完事的，核心是信息层级干净、视觉干扰归零、语义优先于装饰。HTML 本身不负责样式，但结构是否合理，直接决定 CSS 能不能高效实现真正的扁平化——否则你只是用 border-radius 假装扁平。
用语义化标签组织内容，别用 <div> 堆砌
<p>扁平化设计的前提是内容可读性强、逻辑清晰。浏览器默认样式（如 <code><h1></h1> > <h2></h2> > <section></section>）天然支持层级，滥用 <div class="title"> 会让结构松散、屏幕阅读器失效、后期调整成本翻倍。
<ul>
<li>
<code><main></main> 包住整个简历主体，<section></section> 拆分「教育」「工作经历」「技能」等模块
<h3></h3>，职位/专业用 <p></p> 或 <span></span>，避免所有标题都套 <h2></h2>
<time datetime="2022-09">2022.09–2024.06</time>，既语义正确又方便 CSS 单独控制样式CSS 实现真扁平：禁用哪些属性比用哪些更重要
扁平 ≠ 简单，而是主动拒绝制造视觉噪音。很多所谓“扁平简历”其实堆满了 box-shadow、text-shadow、background-image，这反而违背扁平本质。
- 坚决不用
box-shadow（哪怕0 0 0 1px），边框只用border: 1px solid #e0e0e0或干脆无边框 - 字体颜色限制在 2–3 种：主色（如
#212121）、次色（#616161）、强调色（仅用于链接或小标签，如#1976d2） - 图标必须用 SVG 内联（非 PNG），确保缩放无损、颜色可由
fill统一控制，避免引入额外 HTTP 请求和尺寸错位
响应式不是“加个 @media”就完事：打印与移动端要分开处理
扁平化简历大概率会被打印或 PDF 导出，而很多人写的媒体查询只照顾了手机屏幕，却让打印时出现横向滚动、链接乱码、颜色反白等问题。
立即学习“前端免费学习笔记（深入）”；
- 用
@media print单独重置：color: #000、background: transparent、隐藏<a></a>的href文本（用::after { content: "" }清空） - 移动端优先布局：用
flex替代float，但避免嵌套过深；技能标签用display: inline-flex+gap: 4px，比浮动更可控 - 禁用
font-size: clamp()这类新特性——PDF 工具（如 wkhtmltopdf）和部分邮件客户端根本不支持
真正难的不是做出“看起来扁平”的效果，而是克制住给每个模块加 hover 动画、给每行文字加字重变化、给每个图标加描边的冲动。扁平化简历的完成度，往往取决于你删掉了多少代码，而不是写进了多少。
