底部Tab栏需用flex:1+text-align:center实现均匀分布，主内容加padding-bottom防遮挡，用touch事件模拟active态，配合env(safe-area-inset-bottom)适配iPhone X+安全区域。
用 flex 实现底部 Tab 栏的均匀分布
直接用 display: flex + justify-content: space-between 容易出错——它只在项数为偶数时“看起来”均匀，奇数时中间项会偏右。真正均匀得靠 flex: 1 配合 text-align: center。
- 每个 Tab 项设为
flex: 1，让它们平分父容器宽度 - Tab 内容（图标+文字）用
text-align: center居中，别依赖margin: auto - 避免给子项设固定
width，否则在小屏上会溢出或换行 - 加
min-width: 0防止文字过长时 flex 项异常撑宽（尤其 iOS Safari）
fixed 定位下如何防止内容被 Tab 遮挡
很多人把 Tab 栏设成 position: fixed; bottom: 0 后，发现页面主内容被盖住——这不是 Tab 的问题，是主内容没留出底部安全间距。
- 主内容区域必须加
padding-bottom，值 ≥ Tab 栏高度（比如padding-bottom: 56px） - 别用
margin-bottom，它不影响文档流，遮挡照旧 - 如果用
vh布局（如height: calc(100vh - 56px)），注意 iOS Safari 的地址栏缩放会导致vh值跳变，优先选padding方案
点击反馈与 active 状态样式怎么加才不卡顿
纯 CSS 的 :active 在移动端经常失效或延迟，因为 touch 事件和 click 事件触发时机不同。
- 用
touchstart+touchend模拟点击态，配合 class 切换（如is-active）最稳 - 避免在 active 状态里改
transform或box-shadow，容易触发重排；优先用opacity或background-color - 给 Tab 项加
cursor: pointer和-webkit-tap-highlight-color: transparent消除点击灰斑
适配 iPhone X 及以上机型的安全区域
底部 Tab 如果紧贴屏幕底边，在 iPhone X+ 上会被 Home Indicator 挡住，而且用户手势可能误触。
立即学习“前端免费学习笔记（深入）”；
- 用
env(safe-area-inset-bottom)动态补白：padding-bottom: env(safe-area-inset-bottom, 0px) - 同时保留 fallback：
padding-bottom: 56px（写在前面，被后面的覆盖） - 不要只靠
viewport-fit=cover，它只影响视口裁剪，不解决布局留白 - 测试时真机连 Safari 开发者工具，
safe-area-inset-bottom在模拟器里常返回 0
事情说清了就结束。最常漏的是安全区域适配和 active 态的手势响应，这两处一错，用户第一感觉就是“卡”或者“点不准”。
