list-style-position 控制列表标记相对于文本的定位：outside 使标记悬于 content box 外，文本左对齐；inside 将标记纳入文本流，换行后第二行与标记左缘对齐，需重置 padding-left 避免双重缩进。
list-style-position 控制的是标记（项目符号或序号）相对于列表项文本的定位方式，不是控制“序号在盒模型中的位置”——它不改变 li 的盒模型结构，也不影响 padding、margin 或 box-sizing。它只决定标记是“挂在外面”还是“塞进内容里”。
list-style-position: outside 是怎么表现的
这是默认值，标记（如 ● 或 1.）位于 li 的 content box 左侧外部，不参与文本流排版；文本从 padding-left 起始位置开始换行，保持与首行对齐。
- 常见错误：只设
list-style-position: outside却没重置padding-left，导致列表整体缩进过大（浏览器默认ul/ol有padding-left: 40px） - 文本换行后，第二行会与第一行文字左边缘对齐，标记悬浮在左侧空白区，视觉上更清晰
- 适合长文本、多行列表项，可读性高；但若父容器宽度紧张，标记可能被裁切（尤其配合
overflow: hidden）
list-style-position: inside 是怎么表现的
标记被拉进 li 的 content box 内部，成为文本流的一部分；此时标记占用行内空间，文本从标记右侧紧贴着开始，换行后第二行会与标记左缘对齐（形成缩进块）。
- 必须手动清除默认
padding-left，否则会出现双重缩进（既有浏览器默认 padding，又有 inside 拉入的标记） - 容易造成文本不对齐：多行时第二行会比第一行“向右缩进”，看起来像段落首行缩进，而非列表对齐
- 好处是标记和文本真正绑定，适合短条目、图标型列表，或需要标记参与行高/垂直居中计算的场景
- 注意：当使用
list-style-image时，inside下图像尺寸会影响行高，可能撑开li
为什么不能靠 margin/padding 模拟 position 效果
试图用 padding-left + list-style: none + ::before 手动模拟 outside 或 inside，本质已脱离 list-style-position 的语义控制：
-
outside的标记不占内容宽度，不影响text-align和line-height计算；而::before是真实元素，受所有盒模型属性影响 -
inside的换行对齐逻辑由浏览器原生实现，稳定可靠；手动模拟需额外处理white-space、vertical-align等，兼容性差（尤其 Safari 对inline-block ::before换行行为不一致） - 无障碍支持弱：屏幕阅读器能识别原生
list-style-type+position的语义，但对伪元素生成的序号需额外加aria-label或role="listitem"
实际调试时最容易忽略的一点
修改 list-style-position 前，务必先确认父级 ul 或 ol 的 padding-left 是否已被重置。浏览器默认值在不同引擎中略有差异（Chrome 40px，Firefox 37px，Safari 40px），不统一清除会导致 outside 看起来像 inside，或 inside 出现意外缩进。最稳妥写法是：
ul, ol {
padding-left: 0;
}
ul li, ol li {
list-style-position: inside; /* 或 outside */
}
记住：list-style-position 不是布局工具，它是语义化排版开关——该用的时候就用，别绕路手写 ::before 去“复刻”它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
