white-space: nowrap 必须配合 overflow-x: auto 才能实现横向滚动，因 nowrap 仅阻止换行，不触发滚动；需 overflow-x: auto 显式启用滚动条，并配合固定宽度和 flex 布局确保稳定。
white-space: nowrap 为什么必须配合 overflow-x: auto？
单独设 white-space: nowrap 只是阻止换行，不会触发滚动；元素内容超出容器后，浏览器默认会撑宽父容器或溢出隐藏（取决于 overflow 默认值）。要出现滚动条，必须显式设置 overflow-x: auto 或 overflow-x: scroll。
常见错误：只加 white-space: nowrap，没设 overflow-x，结果导航栏一长就换行或把页面挤变形。
-
overflow-x: auto—— 仅在内容超宽时显示横向滚动条，更干净 -
overflow-x: scroll—— 强制显示滚动条（即使没超宽），可能干扰视觉节奏 - 别忘了给容器设固定宽度（如
width: 100%或具体像素值），否则nowrap失效
flex 布局比 inline-block 更稳的三个原因
用 display: inline-block 搭配 white-space: nowrap 看似简单，但容易因空格、换行符产生不可控间隙，且对齐和间距控制弱。Flex 是更现代、更可控的选择。
实操建议：
- 容器设
display: flex+overflow-x: auto+white-space: nowrap（nowrap对 flex 容器本身无作用，但可防止子元素内文本换行） - 子项用
flex: none防止被压缩（尤其按钮/标签类导航项） - 加
scroll-behavior: smooth让滚动更自然（兼容性注意：IE 不支持）
示例关键样式：
nav {
display: flex;
overflow-x: auto;
scroll-behavior: smooth;
}
nav a {
flex: none;
padding: 8px 16px;
}
移动端 touch 滚动不跟手？加这三行 CSS
iOS Safari 和部分安卓浏览器默认禁用非 body 元素的惯性滚动，导致 overflow-x: auto 容器拖起来卡顿、松手即停。
解决方法很简单，但常被忽略：
- 加
-webkit-overflow-scrolling: touch（仅 iOS 有效，已废弃但仍必要） - 确保容器有
height或max-height（哪怕只是height: min-content），否则某些安卓 WebView 不触发 touch 滚动 - 避免在滚动容器上监听
touchstart或preventDefault，会直接禁用原生滚动
滚动条样式怎么改又不破坏功能？
自定义滚动条容易误删关键伪元素，导致滚动失效或兼容性崩塌。核心原则：只覆盖 ::-webkit-scrollbar 系列，保留原生行为。
安全写法：
- 用
::-webkit-scrollbar控整体宽度（推荐width: 8px） - 用
::-webkit-scrollbar-thumb改滑块颜色和圆角（别设display: none） - 不碰
::-webkit-scrollbar-track除非真需要——多数场景留白更稳妥 - Firefox 用
scrollbar-width（auto/thin/none），但不支持细粒度样式
最小可用定制：
nav::-webkit-scrollbar {
width: 6px;
}
nav::-webkit-scrollbar-thumb {
background: #999;
border-radius: 3px;
}
滚动条是否可见、能否滑动、是否响应触控——这三个状态由不同 CSS 属性独立控制，改一个漏一个就会出问题。特别是 overflow-x、scroll-behavior、-webkit-overflow-scrolling 这三者，缺一不可，顺序也不能乱。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
