清除默认样式需重置 margin/padding 并设 box-sizing: border-box；顶层用 flex 垂直分区并设 min-height: 100vh；横向分栏单独建 flex 容器；图文混排局部微调可用 float，但整体布局优先 flex；注意 white-space、overflow 及 align-items 对齐细节。
浏览器对 、、 等元素自带默认间距，不重置就直接写简历布局，顶部和段落之间总“多出一截”，看着像没对齐。这不是你 flex 写错了，是浏览器在帮你“好心添乱”。
实操建议：
- 用 开头—— 尤其关键，否则后续设 还要手动减
- 别只清 ，、 默认有左缩进，简历里做技能列表时会错位
- 字体大小别依赖浏览器默认（比如 Chrome 的 ），显式写 ，避免换设备后行高崩塌
浮动（）现在纯属历史兼容需求；简历这种结构清晰的单页， 能对齐、能等高、能响应式收缩，但滥用会导致子项尺寸失控。
常见错误现象：
- 把 、、 全包进一个 ——结果 高度塌陷，内容溢出
- 给 设 却忘了父容器没设高度，它压根不生效
实操建议：
- 顶层用 做垂直分区：，再让 自适应：
- 横向分栏（如“左侧个人信息 + 右侧经历”）单独建 容器，设 应对小屏
- 避免嵌套超过两层 ，第三层开始容易因 或 触发意外换行
现在还用 ，不是因为“它更好”，而是某些场景下它比 更轻量、不影响文档流——比如在一段简介文字里插个圆形头像，让它浮在右上角，文字自动绕排。
使用场景与坑：
- 仅限图文混排类局部调整，别用它搭整体骨架
- 浮动元素后面必须跟 的空标签或伪元素，否则后续区块会上移（经典“父容器高度塌陷”）
- 在 RTL 语言环境（如阿拉伯语简历）下行为反直觉，若需国际化，优先用 +
简历里常出现“技能标签挤成一团”“公司名被截断显示省略号”——这往往不是 flex 容器问题，而是文本节点自身的渲染策略被忽略。
参数差异与影响：
- 会让整行不换行，即使容器变窄，导致水平滚动或溢出
- 配合 要求元素是块级且有固定宽度，flex 子项若设了 就可能失效
- 中文简历里“·”分隔符如果用 或全角空格， 下不会断行，换成 （零宽空格）更可控
实操建议：给技能标签加 ，每个标签用 防压缩，再配 控制间距——比硬塞 更健壮。
复杂点在于：flex 的 和文本基线对齐是两套逻辑，右侧经历栏里“时间”和“职位”看起来没对齐，大概率是 没显式声明，或者字体 不一致。这些细节不打眼，但扫一眼就觉着“不够专业”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/220333.html