个人信息中心应使用section包裹核心资料、aside放置高频操作，figure处理头像，flex布局实现响应式字段排列，fieldset+legend分组表单并独立提交，响应式断点依内容密度而非固定尺寸设定。
个人信息中心用 section + aside 区分主次内容
别把所有信息塞进一个 div 里。语义化标签不是摆设：section 包裹用户核心资料（头像、姓名、联系方式），aside 放次要但高频操作（修改密码、绑定邮箱、隐私设置）。浏览器和屏幕阅读器能据此建立逻辑层级，SEO 也更友好。
常见错误是用一堆嵌套 div 模拟卡片，结果结构扁平、CSS 难维护、响应式断点一加全乱。比如头像区域单独提成 figure，配合 figcaption 做替代文字，既可访问又利于后期加 hover 效果。
Flexbox 控制横向信息区块对齐，别硬写 float 或绝对定位
地址、生日、职业状态这类字段通常并排显示（PC 端），但移动端必须堆叠。用 display: flex + flex-wrap: wrap 是最稳的解法：
.profile-row {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.profile-field {
flex: 1 1 200px; /* 最小宽度 200px，超了就换行 */
}不推荐 float：清除浮动麻烦，且在 Flex 容器里失效；也不建议 position: absolute：脱离文档流后，高度塌陷、响应式难适配。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
注意：Chrome 105+ 和 Safari 15.4+ 支持 gap，老版本需用 margin 替代，但要小心最后一项多出的外边距。
表单控件统一用 fieldset + legend 分组，避免“改密码”和“改头像”混在一起提交
个人信息中心常含多个功能模块，每个模块应有独立提交逻辑。用 fieldset 把相关输入框包起来，legend 做标题，既能视觉分组，又能通过 form 属性关联不同提交按钮：
<form id="profile-basic">
<fieldset>
<legend>基本信息</legend>
<input name="name">
<input name="phone">
</fieldset>
<button form="profile-basic">保存</button>
</form>
<p><form id="profile-avatar">
<fieldset>
<legend>头像上传</legend>
<input type="file" name="avatar">
</fieldset>
<button form="profile-avatar">上传</button>
</form>这样做的好处是：提交互不干扰、JS 可按 form.id 精准监听、后端路由也容易拆分处理。容易踩的坑是所有输入框共用一个 form，导致改个邮箱也要校验头像文件字段。
响应式断点优先考虑内容密度，不是设备尺寸
别死守 768px / 1024px 这些数字。观察内容：当两个 .profile-field 并排显示时文字开始换行或挤压，就是该切单列的时机。用 min-width 而非 max-width 写媒体查询，更符合渐进增强逻辑：
@media (min-width: 640px) {
.profile-row { flex-direction: row; }
}
@media (min-width: 960px) {
.profile-row { flex-direction: row; }
.profile-field { flex: 1 1 280px; }
}关键点在于：PC 端信息密度高，但用户视线移动距离长；移动端虽窄，但手指点击区域必须够大。所以 font-size 和 padding 在小屏反而要加大，这点常被忽略。
