padding是首选扩热区手段，因浏览器点击热区仅认content+padding盒；min-width/min-height不参与热区计算，仅防塌缩；需配合display非inline及box-sizing:border-box，且父级overflow:hidden会裁剪padding热区。
移动端点击区域过小，根本原因不是“没写样式”，而是默认盒模型没给够可响应空间——padding 才是真正可控、轻量、符合规范的扩热区手段，其他方案要么无效，要么埋坑。
为什么 padding 是首选，而不是 min-width/min-height
浏览器判断点击热区时，只认元素自身的 content box + padding box；min-width 和 min-height 是兜底用的，它们本身不参与热区计算，只是防止内容塌缩后 padding 失效。实际中常见错误：
-
a标签只设min-width: 44px，但仍是display: inline，padding完全不生效 - 按钮文字短（如 “→”），
padding: 12px 16px后宽度仍不足 44px，此时才需min-width: 44px补足 - 对父容器设
min-width，子元素热区依然只有文字大小——热区必须作用在可点击元素自身
display 和 box-sizing 不配对，padding 就是摆设
padding 要起效，必须满足两个硬前提：
- 元素不能是
display: inline（比如默认的a或span），得显式设为display: inline-block或display: block - 必须用
box-sizing: border-box，否则padding会额外撑宽总尺寸，在 Flex/Grid 中极易引发换行或溢出 - 真机验证技巧：加
outline: 1px solid red，看高亮框是否包住你想要的点击范围；如果 outline 只围住文字，说明display或box-sizing没配对
父容器 overflow: hidden 是最隐蔽的“热区杀手”
即使你写了 padding: 12px 16px、display: block、box-sizing: border-box，只要父容器有 overflow: hidden，padding 区域就会被裁掉，手指点上去毫无反应——这在导航栏、卡片、轮播图容器里高频出现。
- 典型场景：
.nav-item是flex子项，外层.nav-bar设了overflow: hidden，结果菜单按钮点击边缘失灵 - 排查方法：临时删掉父级
overflow: hidden，或改用overflow: visible测试是否恢复 - 替代方案：不用
overflow: hidden裁圆角，改用border-radius+background-clip: padding-box
touch-action: manipulation 不是锦上添花，是点击灵敏度开关
哪怕热区已满 44×44px，没加 touch-action: manipulation，iOS Safari 仍可能触发 300ms 延迟、误判为滑动，甚至完全忽略 :active 状态。
- 必须加在按钮自身（如
button、a.btn），加在父容器无效 - 检查有没有父级意外写了
touch-action: none（常见于轮播图、自定义滚动区），它会直接拦截子元素所有触摸事件 - 若按钮含图标
<i></i>或<img>，确认它们没带touch-action: none，否则事件冒泡中断
真正难的不是写几行 CSS，而是在嵌套布局、第三方组件、全局 reset 中识别出哪个父级悄悄截断了 padding，或者哪个 touch-action 配置覆盖了本该响应的区域——这些地方模拟器测不出来，必须真机多环境验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
