无法直接动画 height: 0 ↔ auto，因为浏览器无法计算 auto 的具体像素值，导致 transition 跳变；应改用 max-height 配合 overflow: hidden，并确保 HTML 结构中 checkbox 在 label 和面板前、显式声明 max-height: 0 及足够大的展开值。
用 :checked 控制折叠面板高度，为什么不能直接动画 height: 0 ↔ auto
因为 CSS 无法对 auto 做过渡动画——浏览器不知道“auto”具体是多少像素，transition 会直接跳变。常见现象是点击后内容瞬间展开/收起，没有渐变效果。
解决思路是避开 auto，改用可计算的固定值或利用 max-height 模拟。但要注意：设太小会截断内容，设太大则动画过长、有延迟感。
- 推荐用
max-height替代height，初始设为0，展开时设为一个**足够覆盖所有可能内容的值**（比如500px） - 必须配合
overflow: hidden，否则内容会溢出可见区域 -
max-height的取值不是猜的——如果面板内容高度浮动大（比如含图片、动态文本），宁可略大勿小；若内容高度稳定（如固定行数文字），可精确估算
HTML 结构必须用 <input type="checkbox"> + <label> + 内容容器
这是 :checked 能生效的前提：状态必须由表单控件驱动，且后续元素能被相邻或后代选择器捕获。
典型错误是把 <input> 放在内容后面，或用 <div> 伪装 checkbox——这样 :checked ~ .panel 就选不到目标了。
立即学习“前端免费学习笔记（深入）”；
-
<input>必须在<label>和内容容器之前（文档流顺序） - 用
for属性或包裹方式让<label>点击能触发checked切换 - 内容容器建议用
<div class="panel">，避免用<p>或<section>等语义化标签——它们默认有外边距或样式干扰高度过渡
<input type="checkbox" id="toggle-1"> <label for="toggle-1">点击展开</label> <div class="panel">...内容...</div>
max-height 过渡失效的三个常见原因
即使写了 transition: max-height 0.3s ease，也可能没动画。问题往往不在写法，而在渲染逻辑。
-
max-height初始值不是0，而是none或未声明——必须显式写max-height: 0 - 内容容器有
padding或border，导致视觉上“没收到底”，需同时过渡padding和opacity（或用visibility配合） - 父容器设置了
overflow: hidden但没给固定高度，或用了flex布局未设align-items: flex-start，导致子元素高度计算异常
移动端点击无响应？检查 pointer-events 和焦点状态
部分安卓 WebView 或 iOS Safari 在 label 上点不动，实际是 <input> 被遮挡或失焦了。
- 确保
<input>没被opacity: 0+position: absolute后完全脱离交互流——推荐用clip-path: inset(100%)或position: absolute; left: -9999px - 不要给
<label>设pointer-events: none，否则点击无效 - 如果用了
:focus样式调试，注意 Safari 对:focus的触发比 Chrome 更严格，建议统一用:checked控制视觉态
max-height 失效。与其反复调数值，不如加一层 JS 回退：监听 resize 或用 ResizeObserver 动态更新 style.maxHeight。纯 CSS 方案只适合内容高度相对可控的场景。 
