必须全局设置 *, *::before, *::after { box-sizing: border-box; }，并重置 ul/ol/li 的 margin/padding、统一 display 类型、控制文字长度与伪元素行为，否则易因盒模型、基线对齐或内容差异导致错位。
box-sizing: border-box 必须全局生效，且覆盖伪元素
只写 * { box-sizing: border-box; } 很可能失效——::before 和 ::after 不继承该属性，而清浮动、图标、装饰性内容常依赖它们。第三方组件（如 Ant Design 的 shadow DOM）内部样式也完全隔离，外部声明无效。
正确写法是放在所有 CSS 的最顶部：
*,
*::before,
*::after {
box-sizing: border-box;
}
漏掉 ::before 或 ::after，哪怕只在一个列表项里用伪元素生成圆点或分隔符，它仍按 content-box 计算，多出几像素就会破坏对齐。
ul/ol/li 的默认 margin/padding 必须显式重置
浏览器对 ul 默认设 margin-block-start: 1em（Chrome 是 16px），li 默认无 padding；但如果你手动给某个 li 加了 padding-left: 20px，其他没加，或混用 em 和 px，视觉错位立刻出现。
- 统一重置容器：
ul, ol { margin: 0; padding: 0; } - 所有
li显式设内边距：li { padding: 8px 12px; }（避免只设单边） - 禁用列表符号干扰：
list-style: none;，改用伪元素或背景图控制视觉标记
display 类型混用是隐形错位杀手
部分 li 设 display: inline-block，另一些保持默认 display: list-item，或夹杂 float: left，它们的基线对齐规则、空白处理逻辑完全不同。哪怕宽度数值一致，也会因垂直对齐差异导致“看起来不齐”。
更稳妥的做法：
- 全部设为
display: flex或display: grid容器，子项用flex: 1或grid-column控制分布 - 若必须用
inline-block，统一加vertical-align: top，并确保 HTML 中标签写在同一行（或用font-size: 0消除空白字符间隙） - 绝对不要在同一个列表中混用
float和flex——float元素脱离文档流，flex容器对其完全失控
文字长度差异大时，错位其实是排版预期偏差
盒模型一致后仍“不对齐”，大概率不是宽度问题，而是纯文本内容长短不一造成的视觉落差。比如一个词和一段话并排显示，人眼天然觉得“不齐”。
这时要控制的是呈现一致性，而非硬调像素：
- 加
min-width: 120px给li，保证基础宽度下限 - 用
text-align: left或text-align: center统一对齐方式 - 超长文本强制截断：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - 若含图标或 badge，确保它们尺寸固定且
flex-shrink: 0，防止被压缩变形
真正容易被忽略的，是伪元素和第三方组件内部的盒模型行为——它们不听你写的全局重置，得单独盯住 computed 样式里的 box-sizing 值，而不是只看自己写的 CSS 文件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
