padding比width/height更适合撑开触控热区，因其扩展的是事件响应区域而非视觉尺寸，不破坏Flex/Grid布局流、不触发重排，且兼容性优于transform:scale()；但需配合display:block/inline-block、box-sizing:border-box及min-width/min-height兜底，并排除pointer-events:none等遮挡因素。
为什么 padding 比 width/height 更适合撑开触控热区
移动端手指操作精度有限，44px × 44px 是 Apple 和 Google 共同推荐的最小可触控尺寸。如果按钮视觉上只有 24px 高，单靠 width 或 height 强行拉伸，容易破坏 Flex/Grid 布局流、挤压相邻元素，甚至在响应式断点下溢出容器。
padding 扩展的是事件接收区域，不改变内容尺寸，也不触发重排（比 transform: scale() 更轻量）。但前提是元素得真正“能收事件”——常见失效原因包括：
- 元素是
inline类型（如默认的<span>），垂直方向padding无效，必须加display: inline-block或block - 父容器设了
pointer-events: none，或被z-index更高的层遮挡 - 按钮有
overflow: hidden或带裁剪的border-radius，导致padding区域被截断
如何用 min-width/min-height 防止热区塌缩
纯靠文字撑开点击区不可靠：比如 “X” 关闭按钮，哪怕加了 font-size: 18px，实际宽度可能不到 20px。此时 padding 单独撑不开横向空间。
必须配合兜底限制：
立即学习“前端免费学习笔记（深入）”；
- 给按钮加
min-width: 44px和min-height: 44px，确保内容极短时也有基础尺寸 - 避免同时写
width: 100%和padding——小屏下按钮会过宽，挤占其他交互项 - 若按钮内含图标+文字，检查子元素是否用了
margin抵消了padding留白
align-items: stretch 在 Flex 列表中怎么真正起效
它本身不“扩大”点击区，但能让列表项在交叉轴（通常是高度方向）自动拉伸填满父容器，避免因内容短导致热区塌缩。不过这个行为极易被悄悄禁用：
- 父容器必须有明确高度来源，比如
min-height: 60px或嵌套在flex: 1的区域里；否则子项只包裹内容，拉伸无基准 - 子项不能设
height、min-height或align-self: flex-start，否则拉伸链中断 - 图片需加
max-width: 100%和height: auto，否则加载后撑高单个项，破坏整行等高 - Flex 容器设了
flex-wrap: wrap后，align-items: stretch只对当前行生效，跨行不联动
touch-action: manipulation 不是万能加速键
它确实能跳过 300ms 延迟，但仅对明确可点击的元素生效，且极易被覆盖或忽略：
- 必须显式加在自定义按钮上（如
<div class="btn">），原生<button>默认已优化，但一旦你重写了display或覆盖了touch-action，就得手动补回 - 第三方 UI 库常带全局
* { touch-action: auto }，你的选择器权重不够就会被干掉；用 DevTools 的 Computed 面板确认最终值 - 纯
<div>即使加了该属性，iOS Safari 仍可能不加速，得配role="button"和tabindex="0" - 轮播容器、地图、横向滚动列表这类需要手势的区域，**禁用**
touch-action: manipulation，否则会禁用滚动
最容易漏掉的是：写了 padding，也加了 min-width，但没检查元素是否真在事件捕获链里——比如父级 pointer-events: none 或 z-index 错位，导致手指点下去，事件根本没传到目标上。
