details标签需重置默认样式以保障中文阅读节奏：summary须设为块级并统一排版，展开内容必须用<p>包裹，text-indent、line-height等关键属性须显式声明，禁用max-height动画，lang属性需精准标注中英文混排。
details标签默认样式破坏中文段落节奏本身不带语义化段落行为，summary是行内级元素，点击后展开的子内容若直接塞，浏览器会按默认 margin 渲染，导致首行无缩进、行高塌陷、段间距突兀。中文阅读依赖稳定的视觉节奏，而details内部若没重置，会出现“文字贴着左边缘挤在一起”或“两段之间空得像断层”的现象。
-
summary里别写长句，它本质是触发器，不是正文容器；超 20 字就该拆到展开区
- 展开内容必须用
包裹，不能裸文本或
——否则 screen reader 无法识别段落边界- 默认
summary字体粗细、字号、上下 padding 不一致，iOS Safari 和 Chrome 对summary::marker支持差异大，容易让「▶」符号和文字 baseline 错位
text-indent + line-height 必须显式重写不继承父级段落排版规则，所有中文阅读关键参数得手动设，否则缩放、深色模式、系统字体变更时全崩。
- 每个展开后的
都要加text-indent: 2em;，禁用px单位，否则缩放后缩进失效
-
line-height: 1.6;必须写在上，不能只靠全局 body 设置——details内部计算会跳过继承链
- 若
summary含中文标点（如「说明：」），建议用span包住标点并设font-family: "PingFang SC", "Hiragino Sans GB";，避免 fallback 字体把冒号撑宽
折叠/展开动画影响可读性，别用 transform 或 opacity
原生details不支持 CSS 过渡，强行加max-height动画会导致行高错乱、文字被裁切，尤其在中文字数多、行高为1.6时更明显。
- 禁用
transition: max-height .3s;——中文段落高度难预估，max-height: 0 → 500px必然闪动或留白
- 真需要动画，改用
height: auto配合overflow: hidden和 JS 控制 class 切换，但优先接受原生无动画体验
- 移动端双击缩放后，
details内部文字若用了font-size: 100%，可能缩成 12px，务必统一用16px
无障碍与多语言混排容易漏掉 lang 属性details常用于 FAQ、帮助文档，内容常含中英术语、代码片段、URL，但lang若只设在上，屏幕阅读器对展开区英文单词仍按中文规则朗读，且折行逻辑错误。
- 在每个
details上加lang="zh"，若内部有英文段落，再嵌套<p lang="en">...</p>
- 英文段落需同步加
overflow-wrap: break-word; word-break: keep-all;，否则长 URL 或类名（如useEffect）会横向溢出
- 避免在
summary里放code块——summary不支持块级子元素，Chrome 会静默忽略，Firefox 可能报错
细节最麻烦的地方不在展开逻辑，而在「折叠状态下，summary 的视觉重量是否和正文段落协调」。很多人调完展开区就忘了 summary 本身也是中文文本节点：它的字重、字距、行高、甚至是否启用 font-smoothing，都会影响用户第一眼判断要不要点开。这一步没对齐，后面所有排版都白调。
summary是行内级元素，点击后展开的子内容若直接塞，浏览器会按默认 margin 渲染，导致首行无缩进、行高塌陷、段间距突兀。中文阅读依赖稳定的视觉节奏，而details内部若没重置，会出现“文字贴着左边缘挤在一起”或“两段之间空得像断层”的现象。
-
summary里别写长句，它本质是触发器，不是正文容器；超 20 字就该拆到展开区 - 展开内容必须用
包裹，不能裸文本或
——否则 screen reader 无法识别段落边界- 默认
summary字体粗细、字号、上下 padding 不一致，iOS Safari 和 Chrome 对summary::marker支持差异大，容易让「▶」符号和文字 baseline 错位text-indent + line-height 必须显式重写
不继承父级段落排版规则，所有中文阅读关键参数得手动设，否则缩放、深色模式、系统字体变更时全崩。- 每个展开后的
都要加
text-indent: 2em;，禁用px单位，否则缩放后缩进失效 -
line-height: 1.6;必须写在上，不能只靠全局 body 设置——
details内部计算会跳过继承链 - 若
summary含中文标点（如「说明：」），建议用span包住标点并设font-family: "PingFang SC", "Hiragino Sans GB";，避免 fallback 字体把冒号撑宽
折叠/展开动画影响可读性，别用 transform 或 opacity 原生
details不支持 CSS 过渡，强行加max-height动画会导致行高错乱、文字被裁切，尤其在中文字数多、行高为1.6时更明显。- 禁用
transition: max-height .3s;——中文段落高度难预估，max-height: 0 → 500px必然闪动或留白 - 真需要动画，改用
height: auto配合overflow: hidden和 JS 控制 class 切换，但优先接受原生无动画体验 - 移动端双击缩放后，
details内部文字若用了font-size: 100%，可能缩成 12px，务必统一用16px
无障碍与多语言混排容易漏掉 lang 属性
details常用于 FAQ、帮助文档，内容常含中英术语、代码片段、URL，但lang若只设在上，屏幕阅读器对展开区英文单词仍按中文规则朗读，且折行逻辑错误。- 在每个
details上加lang="zh"，若内部有英文段落，再嵌套<p lang="en">...</p> - 英文段落需同步加
overflow-wrap: break-word; word-break: keep-all;，否则长 URL 或类名（如useEffect）会横向溢出 - 避免在
summary里放code块——summary不支持块级子元素，Chrome 会静默忽略，Firefox 可能报错
细节最麻烦的地方不在展开逻辑，而在「折叠状态下，summary 的视觉重量是否和正文段落协调」。很多人调完展开区就忘了 summary 本身也是中文文本节点：它的字重、字距、行高、甚至是否启用 font-smoothing，都会影响用户第一眼判断要不要点开。这一步没对齐，后面所有排版都白调。
- 默认
