直接加padding最快，但对label包裹控件、图标按钮等会破坏视觉；真要“只扩热区不改外观”，须用伪元素方案，并配position: relative、pointer-events: none，否则无效。
直接加 padding 最快，但对 label 包裹的表单控件、图标按钮、文字链接等场景，它会破坏视觉或布局；真要“只扩热区不改外观”，得用伪元素方案——而且必须配 pointer-events: none 和 position: relative，否则白写。
button 或 a 标签直接加 padding 为什么有时没反应
常见错误是忘了两件事：一是行内元素（比如默认的 a）垂直方向 padding 不生效，必须先设 display: inline-block 或 display: block；二是没确认盒模型，box-sizing 默认是 content-box，加了 padding 会让总尺寸变大，可能撑破容器或换行。
- 优先给可点击元素本身加
padding，别加在内部span或img上——否则热区只覆盖那部分 - 所有交互元素建议统一加
box-sizing: border-box，避免意外溢出 - 移动端至少保证
min-height: 44px，iOS Safari 对小目标有隐式容错限制，光靠文字行高撑不够 - 别用
line-height撑高按钮——内容多时容易截断，padding+flex居中更稳
label 包裹 checkbox/radio 为什么能自动扩大热区
这是 HTML 原生行为，不是 CSS 实现的。只要 input 是 label 的**直接子节点**，浏览器就把整个 label 渲染区域映射为该控件的点击热区，包括空白、图标、前后空格——连屏幕阅读器都会把 label 文本作为控件描述。
- 不用写
for和id，嵌套结构更轻量、不易出错 -
input不能设display: none，否则热区消失；要用opacity: 0; position: absolute;隐藏 - 如果
label内含图标或 SVG，记得加vertical-align: middle或用flex对齐，避免基线错位导致热区偏移 - 别在
label上设pointer-events: none，这会直接禁掉整个热区
::before / ::after 扩展点击区域必须写的三行 CSS
伪元素本身不响应事件，也不影响布局，想让它“透明扩热区”，必须显式声明三件事：定位上下文、绝对定位范围、事件穿透开关。漏掉任意一条，热区就失效。
立即学习“前端免费学习笔记（深入）”；
- 父元素（如
button）必须设position: relative - 伪元素用
position: absolute+top/left/right/bottom拉出额外空间，例如top: -12px; left: -12px; width: calc(100% + 24px); height: calc(100% + 24px) - 伪元素必须加
pointer-events: none，否则它会拦截点击，真实元素收不到事件 - iOS Safari 有些版本会裁剪完全透明的伪元素，加个极低透明度背景兜底：
background: rgba(0,0,0,0.001)
touch-action: manipulation 能不能代替伪元素
不能。它只是告诉浏览器“这个区域只做点击”，用来关闭双击缩放和触摸延迟，**不扩大热区**。哪怕加了 touch-action: manipulation，一个 16×16px 的图标还是只有那么大可点。
- 必须加在真实可点击元素上（如
button），加在伪元素上无效 - 配合伪元素一起用才有意义：伪元素扩热区 +
touch-action提速响应 - 旧版 Android WebView（≤4.4）基本不支持，不能当作主要方案依赖
- 如果元素本身需要拖拽（比如轮播箭头），加了它反而禁掉手势，得权衡
最容易被忽略的是 iOS Safari 的点击穿透问题：伪元素扩出的热区如果叠在另一个可点击元素上（比如悬浮菜单盖住底部导航），iOS 可能误触发下层元素——这不是 bug，是渲染引擎对重叠热区的判定逻辑，真机测试时务必验证层级关系。
