更适合放“工作经历”，因其具有语义化含义，表示主题独立的内容区块，而 无语义；误用会导致 seo 权重分散、无障碍访问失败及 lighthouse 报错。
为什么 <section></section> 比 <div> 更适合放“工作经历”？<p>语义化不是为了好看，是让浏览器、屏幕阅读器和未来你自己都看得懂这块内容在干嘛。<code><section></section> 明确表示“一个主题独立的内容区块”，而 <div> 是纯容器，没有任何含义。用错会导致 SEO 权重分散、无障碍访问失败，甚至被 Lighthouse 标记为“语义缺失”。<ul><li>工作经历、教育背景、技能列表这些有明确主题的模块，优先用 <code><section></section>，别图省事全塞 <div>
<li>如果某块内容里还包含多个子主题（比如一家公司里分前端/后端项目），里面再嵌一层 <code><article></article>，而不是继续套 <section></section>
<header></header> 或 <footer></footer> 外面硬加 <section></section> —— 它们本身已有语义，再包一层反而混乱CSS 中 class 命名怎么避免写成 box1、left-part 这种？
box1 无法维护，left-part 描述的是位置而非功能，一旦布局变（比如改成响应式横排），这个 class 就彻底失效。命名要回答“它是什么”，而不是“它在哪”或“它长啥样”。
- 用功能或内容命名：
job-item比card清晰，contact-link比icon-btn可靠 - 加前缀统一作用域：简历页所有 class 建议以
resume-开头，比如resume-skill-bar，避免将来和其他项目样式冲突 - 别用状态词直接当 class 名：
hidden、active应该由 JS 动态加，不要写死在 HTML 里
Flexbox 布局中 flex-wrap: wrap 为啥有时不生效？
常见现象是明明设了换行，但子项还是挤在一行、溢出容器。根本原因往往不是 Flex 属性本身，而是父容器或子项的尺寸约束没理清。
- 父容器必须有明确宽度（比如
width: 100%或max-width），否则flex-wrap缺少参照基准 - 子项默认
flex-shrink: 1，会主动压缩自己来适应容器 —— 如果你希望它们宁可换行也不缩小，得加flex-shrink: 0 - 检查有没有意外的
white-space: nowrap在子元素上（尤其文字容器），它会阻止内部换行，间接导致 flex 容器“以为”没空间可换
用 @media 做响应式时，断点设在 768px 真的合适吗？
768px 是 iPad 旧款宽度，现在大量安卓平板、折叠屏手机、甚至某些桌面缩放场景都不吃这套。硬套这个值容易造成“在真·平板上还是手机样式”或者“Chrome 缩放到 90% 就错乱”。
立即学习“前端免费学习笔记（深入）”；
- 优先用内容驱动断点：比如技能栏从横向图标变成纵向列表，不是因为屏幕宽度到了某个数，而是当图标排不下 4 个时才换
- 移动端起步建议用
min-width: 320px（覆盖最窄 viewport），然后逐步向上加，而不是只盯几个“经典值” - 避免用
max-width写死上限断点，比如@media (max-width: 1024px)—— 现代笔记本常是 1280×800，这个断点可能永远触发不了
实际做简历页时，最容易被忽略的是打印样式——用户 Ctrl+P 时，背景色、浮动、Flex 排列全乱套。加一段 @media print 把颜色清掉、把布局切回 block、隐藏无关图标，花不了五分钟，但能救回一份体面的纸质版。
