用max-height替代height可实现平滑过渡，因height:auto不可插值；需设足够大固定值（如500px）并配合overflow:hidden，值过小会截断、过大则拖沓；内容高度差异大时应JS读取scrollHeight动态设置。
用 max-height 实现过渡时为什么高度变化不生效
直接对 height 设置 transition 无效，因为从 0 到 auto 无法计算中间值。主流解法是改用 max-height，并设一个足够大的固定值（如 500px），让浏览器能插值动画。
- 值不能太小，否则内容被截断；也不能过大，否则展开慢、有明显延迟
- 建议根据内容最大可能行数估算，比如 10 行文本 ≈
240px，再加 20% 余量 - 若内容高度差异极大（如含图片或动态加载），需 JS 测量真实高度后设为
max-height
如何用 JS 动态设置 max-height 过渡起点和终点
点击展开前，先获取目标元素的 scrollHeight，再设为 max-height；收起时设回 0。关键在触发重排前完成样式变更，否则过渡会跳过。
- 展开流程：
el.style.maxHeight = '0'→el.offsetHeight（强制重排）→el.style.maxHeight = el.scrollHeight + 'px' - 收起流程：直接设
maxHeight = el.scrollHeight + 'px'→offsetHeight→maxHeight = '0' - 过渡结束后记得清除内联
max-height，避免影响后续 JS 操作
function toggleAccordion(el) {
const content = el.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = '0';
} else {
content.style.maxHeight = content.scrollHeight + 'px';
}
}
overflow: hidden 必须加在动画元素上
如果只靠 max-height 过渡但没设 overflow: hidden，内容会在动画过程中溢出容器，视觉上像“撕裂”。这个样式不是可选的，是过渡成立的前提。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 必须写在目标内容元素上，不能只写在父容器
- 不要用
overflow: clip替代，部分旧版 Safari 不支持 - 若内容含绝对定位子元素，它们可能突破
overflow: hidden边界，需额外处理定位上下文
移动端点击区域小导致手风琴误触怎么办
纯靠 <button> 或 <div> 做触发器，在触摸设备上容易点不中、连点两次才响应。得兼顾语义、可访问性和触控体验。
立即学习“前端免费学习笔记（深入）”；
- 触发器至少设
min-height: 44px（iOS 推荐最小触控尺寸） - 用
<button type="button">而非<div>，避免屏幕阅读器识别异常 - 添加
touch-action: manipulation减少移动端 300ms 延迟 - 避免在触发器内嵌套其他可点击元素（如链接），否则事件冒泡易引发意外展开/收起
max-height 的取值精度和重排时机控制；而手风琴真正稳定，往往卡在那些没显式报错、但点击无反应或内容闪一下就消失的边界场景里。 
