应将 display: flex + align-items: center 仅用于头像与文字组成的子容器（如 .profile-header），而非整个 .card；头像加 flex-shrink: 0 防压缩，文字区用响应式 margin（如 1rem）；语义化使用 h2/h3/p 并配合适当 line-height 和 max-width；响应式只在 min-width: 768px 切换 flex-direction；卡片需设 min-height: 100vh 才能确保垂直居中生效。
头像+文字怎么垂直对齐不偏移
用 display: flex + align-items: center 是最稳的，但别直接套在 .card 上——它会把整个卡片内容强行拉成一行。应该只作用于头像和文字区组成的子容器，比如 .profile-header。
常见错误是给头像设 vertical-align: middle，这在块级上下文中完全无效；或者用 margin-top 硬调，结果一换字体或字号就错位。
- 头像加
flex-shrink: 0，防止被 Flex 压缩变形 - 文字区用
margin-left（PC）或margin-top（移动端），别用固定像素值，改用1rem或0.75rem - 如果头像用了
border-radius: 50%但边缘发虚，检查是否漏了overflow: hidden在父容器上
姓名、职位、简介的语义与行高怎么配
不用全塞进 <p></p>——<h2></h2> 和 <h3></h3> 不只是为了加粗，它们自带合理默认 margin 和 line-height，能自然拉开层次。简介段落则必须加 line-height: 1.5 和 max-width: 30rem，否则长句在小屏上会撑破卡片。
-
<h2 class="name"></h2>对应人名，字号建议1.25rem -
<h3 class="role"></h3>对应职位，字号0.9375rem，颜色比姓名浅一级 - 简介用
<p class="bio"></p>，避免用font-size: 0.875rem同时又没设line-height，那会导致字贴在一起
响应式断点设在哪才不白写
实测中 90% 的小屏用户根本不会触发 480px 或 640px 断点，硬加反而让 CSS 更难维护。真正有效的只有一次切换：手机竖屏堆叠 → 平板横屏并排。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 默认移动优先：头像在上，文字在下，
flex-direction: column - 只在
@media (min-width: 768px)里切为flex-direction: row - 别给
.card设死宽度，用max-width: 360px+width: 100%，让它在窄屏填满，在宽屏不撑开
图片挂了怎么办，alt 属性到底写什么
alt="" 或 alt="avatar" 等于放弃信息——既不利于无障碍访问，也失去降级提示价值。图片加载失败时，用户看到的应该是“谁 + 干什么”，而不是一个空框或“头像”两个字。
- 正确写法是
alt="李娜 - UI设计师"，包含真实身份和角色 - 后端返回头像 URL 前应做有效性校验，前端再补一层
onerror="this.src='fallback.svg'" - SVG fallback 比 PNG 小得多，且支持
fill动态着色，适合深色模式适配
实际排版中最容易被忽略的是：卡片容器本身没设 min-height: 100vh 时，align-items: center 垂直居中就失效；还有很多人把 box-shadow 写成 box-shadow: 0 0 10px #000，结果在 Retina 屏上发虚——得用 rgba(0,0,0,0.1) 控制透明度。
