应统一设置 box-sizing: border-box 并配合 width: 100%，同时添加 -webkit-tap-highlight-color: transparent 和 button:active 样式；点击区域需 min-height + padding 保障 ≥44×44px；文字换行用 white-space: normal、word-break: break-word、line-height: 1.4。
按钮宽度撑满父容器但留白不够怎么办
直接写 width: 100% 看似合理，但实际会忽略 padding、border 和 box-sizing 默认值，导致按钮溢出或文字被截断。尤其在移动端小屏幕下，这种“假全宽”极易触发横向滚动条。
正确做法是统一设置 box-sizing: border-box，再配合 width: 100%：
button {
width: 100%;
box-sizing: border-box;
padding: 12px 16px;
border: 1px solid #ccc;
}
- 必须给所有按钮（或重置全局
button, input[type="button"]）加box-sizing: border-box，否则 padding 会额外撑大宽度 - 避免用
max-width替代width——它只限制上限，不保证撑满 - 如果父容器有
padding，按钮不需要额外减去这个值；靠width: 100%+border-box就能自然贴边
点击区域太小导致移动端误触
移动端最小可点击区域建议 ≥ 44×44px，但默认 button 的 height 常不足，尤其文字缩小时更明显。单纯调高 font-size 不解决问题，可能破坏排版节奏。
用 min-height + padding 组合保障点击面积：
button {
min-height: 44px;
padding: 12px 20px;
font-size: 16px;
}
-
min-height比height更安全：内容多时自动撑高，不会裁剪文字 - 横向 padding 至少留 20px，确保手指按压时不碰到相邻元素
- 别依赖
line-height控制高度——它对 inline 元素有效，但 button 是 replaced element，行为不稳定
不同屏幕尺寸下按钮文字换行错乱
小屏上长按钮文字常被强制截断（text-overflow: ellipsis）或挤成两行但行高错位，根源是未控制换行策略和行高继承。
关键配置三项： white-space、word-break、line-height
button {
white-space: normal;
word-break: break-word;
line-height: 1.4;
}
-
white-space: normal允许空格处换行；若按钮含英文长单词，加word-break: break-word强制折行 - 避免用
flex-wrap: wrap包裹按钮文字——button 本身不是 flex 容器，无效 -
line-height设为无单位数值（如1.4），避免继承父级 font-size 导致行高突变
按钮在 iOS Safari 中点击无反馈
iOS Safari 默认禁用非 a、button 元素的 :active 伪类，且部分版本对 button 的点击态响应延迟或丢失，用户感觉“点不动”。
两个必须项：-webkit-tap-highlight-color + 显式 :active 样式：
button {
-webkit-tap-highlight-color: transparent;
}
button:active {
opacity: 0.8;
transform: scale(0.98);
}
-
-webkit-tap-highlight-color: transparent关掉灰色背景闪光，否则会盖住你自定义的 :active 效果 - 仅靠
opacity不够——iOS 上动画帧率低，需搭配轻微transform: scale()提升响应感 - 别用
transition: all；指定属性如transition: opacity 0.15s, transform 0.15s，避免触发不必要的重绘
box-sizing: border-box 和 -webkit-tap-highlight-color，这两个不加，其他再精细也卡在第一关。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
