details标签本身不支持直接设置宽高，需用外层div包裹并设width/max-width，summary需display:block占满宽度，内容区滚动须对非summary子元素设max-height+overflow-y:auto。
details 标签本身不支持直接设置宽高，得靠 CSS 控制容器
<details> 是语义化折叠组件，但它的默认行为是“内容区自动撑开”，width 和 height 不能直接写在 <details> 标签上生效。真正能自定义大小的，是它内部的 <summary> 和后续子元素（比如 <div>）。常见错误是给 <details> 加 style="width: 300px"，结果发现没反应——因为浏览器不把 <details> 当成块级布局容器来处理尺寸。
实操建议：
- 用外层
<div>包裹<details>，再对这个<div>设置width/max-width -
<summary>默认是 display: list-item，想让它占满父容器宽度，需加display: block - 如果要限制展开后内容区的高度（比如做滚动折叠面板），必须给
<details>的直接子元素（非<summary>）设max-height+overflow-y: auto，且该子元素需是块级、有明确高度上下文
让 summary 占满指定宽度并居中对齐
默认 <summary> 左对齐、带小三角、宽度仅包裹文字。要让它像按钮一样铺满整个折叠面板顶部，关键在重置显示模式和内边距。
示例 CSS：
立即学习“前端免费学习笔记（深入）”；
details > summary {
display: block;
padding: 12px 16px;
width: 100%;
text-align: center;
background: #f5f5f5;
border: 1px solid #ddd;
cursor: pointer;
}
details[open] > summary {
border-bottom: none;
}
注意：details[open] 是判断展开状态的伪类，可用于切换样式；summary::marker 可隐藏或替换小箭头，但兼容性有限（Firefox 支持较好，Chrome/Safari 需加前缀或改用 background-image）。
实现固定高度 + 滚动的折叠内容区
单纯给 <details> 设 height 不会限制内容区，必须作用于它的第一个非-summary 子节点。典型结构是：
<details> <summary>标题</summary> <div class="details-content">很多内容...</div> </details>
然后这样控制：
.details-content {
max-height: 200px;
overflow-y: auto;
padding: 8px 16px;
border-top: 1px solid #eee;
}
要点：
- 不要用
height: 200px，否则内容少时留白难看；max-height更灵活 - 若内容区里有
flex或grid布局，可能需要额外设min-height: 0防止 flex item 撑高容器 - 滚动条样式可进一步用
::-webkit-scrollbar调整，但属于增强项，非必需
移动端适配和 focus 状态容易被忽略
在 iOS Safari 上，<summary> 点击区域小、响应迟钝，且默认 focus 样式（蓝色外框）在触屏设备上不明显。不处理的话，用户可能点了几下才触发展开，体验断层。
建议补两处：
- 给
<summary>加touch-action: manipulation提升点击响应速度 - 显式定义
:focus和:focus-visible样式，例如outline: 2px solid #007aff，确保键盘导航和触屏反馈一致 - 避免在
<summary>里放<button>或<a>，会干扰原生折叠逻辑，导致双击或失效
细节尺寸控制从来不是单靠一个标签完成的，<details> 只负责状态和语义，视觉表现全靠外围 CSS 精确干预——尤其是那个包裹用的 <div> 和内容区的 max-height 组合，漏掉任何一个，大小定制就落空。
