flex布局比grid更易对齐头像与文字且兼容性更稳；需用flex-shrink:0防头像压缩、flex:1自适应文字区、align-items:center垂直居中；img必带alt（含姓名+角色）和loading="lazy"；cdn头像用.webp；慎用object-fit:cover；响应式仅设768px和1024px两断点；悬停用transform+transition，禁用top/left；职位超长时需text-overflow:ellipsis配合white-space:nowrap及固定高容器。
卡片结构用 flex 布局比 grid 更容易对齐头像和文字
多数人一上来就用 grid，结果在 IE 或旧版 Safari 里错位——flex 的兼容性更稳，且单行对齐逻辑更直观。关键不是“多酷”，而是“谁都能改”。
-
display: flex放在卡片容器（如.member-card），头像用flex-shrink: 0防止被压缩 - 文字区域用
flex: 1自适应宽度，避免硬写width导致响应式断裂 - 垂直居中用
align-items: center，别依赖margin-top这种不可靠方式
img 标签必须带 alt 和 loading="lazy"
不加 alt 会被屏幕阅读器跳过，SEO 也丢权重；不加 loading="lazy" 会导致首屏加载卡顿——尤其团队页常有 6–12 张头像。
-
alt内容写真实姓名+角色，比如alt="张伟 - 前端工程师"，别写“头像”或留空 - 如果头像来自 CDN，确认 URL 含
.webp后缀，否则 Chrome 会降级加载大体积.jpg - 慎用
object-fit: cover：它裁剪图片，但若原始图比例差异大（比如竖构图人像），可能切掉脸部
响应式断点只设两个：768px 和 1024px
太多断点反而难维护，移动端竖排、平板横排、桌面三列足够覆盖 95% 场景。别为“iPad Pro 宽屏”单独加一个 1280px。
- 默认堆叠：
flex-direction: column（手机） - ≥768px 改为
flex-direction: row，每行最多 2 张卡片 - ≥1024px 用
display: grid+grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))，自动均分宽度 - 别在媒体查询里重复写字体大小，统一用
rem，根字号按屏幕宽度动态缩放
悬停动效用 transform + transition，禁用 top/left
top 和 left 触发重排，卡顿明显；transform 走 GPU，丝滑且省电。
- 推荐写法：
transition: transform 0.25s ease, box-shadow 0.25s ease - 悬停时只做两件事：
transform: translateY(-4px)+ 加一层浅灰阴影（box-shadow: 0 4px 12px rgba(0,0,0,0.08)） - 别加旋转或缩放——团队页是信息载体，不是动画演示页；用户扫一眼就要找到人，动效只是提示“可点击”，不是吸引注意力
实际项目里最常漏的是头像的宽高比控制和文字截断逻辑。比如职位名超长时，text-overflow: ellipsis 必须配合 white-space: nowrap 和固定高度容器，否则直接撑开卡片。这些细节不写进 HTML 结构里，光靠 CSS 很难兜住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
