直接结论：用 border-right（或 border-left）比 margin 更可控稳定；因 margin 易致右偏或换行，border 可精准控制且不占布局空间，推荐每项设 border-right 再用 :last-child 去除末项边框。
Flex菜单栏中分割线该用 margin 还是 border？
直接结论：用 border-right（或 border-left）比靠 margin 撑开更可控、更稳定。因为 margin 会在最后一项右侧多出空白，容易导致菜单整体右偏或换行；而 border 可精准控制哪几个项之间有线，且不侵占布局空间。
常见错误现象：justify-content: space-between 配合 margin-right 后，最后一项右边空出一大段；或者用 :not(:last-child) 加 margin-right，但响应式下子项换行后，中间项的 margin 又变成垂直方向，线条错位。
- 推荐统一给每个菜单项加
border-right: 1px solid #e0e0e0 - 再用
:last-child把最后一项的边框去掉：border-right: none - 如果菜单项高度不一致，
border会自动对齐容器顶部，比margin更可靠
如何让 Flex 菜单项等宽且分割线居中对齐？
关键在 flex: 1 和 box-sizing: border-box 的配合。否则 border-right 会让总宽度超限，尤其在固定容器宽度下触发换行或溢出。
使用场景：导航栏宽度固定为 100%，要求 4 个菜单项平均占满，线在项与项正中间。
- 给菜单容器设
display: flex和width: 100% - 给每个菜单项设
flex: 1，并确保box-sizing: border-box（否则边框会额外加宽） - 分割线用
border-right，不要用伪元素或额外 DOM 元素 - 若需线略短（如不顶到上下边缘），改用
background-image: linear-gradient(...)或伪元素::after定位，但复杂度上升，一般情况不必要
响应式断点下分割线消失或错位怎么办？
根本原因是 Flex 子项在换行（flex-wrap: wrap）后，:last-child 仍指原始 DOM 最后一个，不是视觉上每行的末尾。此时 border-right: none 失效，导致某行中间出现“断线”或末尾多出线。
解决思路：避免在换行菜单里硬套左右 border 分割；改用相邻兄弟选择器 + 精确控制。
- 关闭换行：
flex-wrap: nowrap，配合overflow-x: auto实现横向滚动（适合工具类菜单） - 若必须换行，放弃
border-right，改用margin-right配合flex: 0 0 calc(25% - 8px)（假设 4 项），再用:nth-child(4n)清除每行末尾的 margin - 更稳妥的做法：用
gap: 16px（现代浏览器支持良好），完全不用 border 或 margin 控制间距，分割线改由背景色块或阴影模拟
border 分割线颜色模糊、发虚怎么调？
这是高 DPI 屏幕（如 Retina、Windows 缩放 125%/150%）下的经典问题：1px 边框被渲染成非整像素，导致抗锯齿模糊。不是代码写错，而是 CSS 像素和设备像素没对齐。
- 优先用
transform: scaleY(0.5)配合transform-origin: top把 1px 边框压成物理 0.5px（仅适用于水平线） - 或改用
background-image: linear-gradient(to right, #e0e0e0, #e0e0e0)，宽度设为1px，位置精确控制 - 避免用
border: 0.5px solid—— 大部分浏览器不支持 sub-pixel border 宽度，会向上取整为 1px - 检查父容器是否设置了
transform或will-change，这些可能触发亚像素渲染，临时移除可验证
真正麻烦的是既要清晰线、又要兼容老浏览器、还要适配缩放 —— 这时候不如接受 1px 在某些设备上轻微模糊，优先保证结构正确和交互可用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
