list-style-position 控制列表标记是否参与文本流：outside 时标记在 content box 外左侧，文本从 padding-left 起始换行；inside 时标记作为内联元素挤占内容宽度，需手动清除默认 padding-left 避免双重缩进。
list-style-position 控制的是标记（比如圆点、数字）相对于列表项文本的排版位置，不是“调个参数就对齐”的视觉微调——它直接改变标记是否参与文本流，这点不厘清，后面所有样式都会偏移。
为什么 list-style-position: outside 下第二行文本不和第一行左对齐
这是标准行为，不是 bug：outside 时标记被渲染在 content box 左侧外部，不占文本宽度；文本从 padding-left 起始位置开始换行，第二行自然顶到该起始线，和首行文字左边缘对齐。但标记本身悬浮在更左边，视觉上就“悬空”了。
- 常见错误：只写
list-style-position: outside却没重置ul默认的padding-left: 40px，导致整体缩进过大 - 若父容器设了
overflow: hidden，outside标记可能被裁掉（尤其小屏幕或窄栏） - 适合长描述型列表，可读性高；但不适合需要标记与文本强绑定的场景（如带图标+文字的导航项）
为什么 list-style-position: inside 会挤占内容宽度
inside 把标记当作首行内联元素塞进文本流，它真实占用行内空间——这意味着它的宽度会计入 li 的 content 区，直接压缩可用文本宽度。
- 必须手动清除默认
padding-left，否则出现“双重缩进”：既有浏览器默认 padding，又有标记挤入带来的右移 - 多行文本时，第二行会与标记左缘对齐，看起来像段落首行缩进，而非列表项对齐
- 当使用
list-style-image时，图片尺寸会直接影响行高，可能意外撑开li - 调试建议：临时加
background: yellow到li查看真实内容区收缩情况
用 JavaScript 动态切换 listStylePosition 的同步陷阱
通过 element.style.listStylePosition = "inside" 设置后，getComputedStyle(element).listStylePosition 不一定立刻返回新值——尤其在元素未渲染、或处于 display: none 状态时。
- 读取前建议触发一次重排，例如访问
element.offsetHeight - 避免在
requestAnimationFrame回调外直接读取计算值 - 监听变化时，用
MutationObserver监听style属性不如监听 class 切换可靠（class 更可控、更易 debug）
混合内容下无法靠单一 CSS 规则统一控制
一个 ul 里既有短标题（适合 inside 对齐），又有长描述（需要 outside 避免缩进错乱），这时不能幻想靠一个属性自动适配——list-style-position 是作用于整个列表容器的，不是单个 li。
- 必须拆成不同 class，例如
.list-inside和.list-outside - 对应手动管理
padding-left、text-indent或margin-left补偿 - 真正难处理的是嵌套列表 + 响应式断点 + 自定义
list-style-image的组合场景，此时建议直接用display: flex替代，但要记得补语义（role="list"/role="listitem"）
最常被忽略的一点：它不改变盒模型结构，也不响应 box-sizing；所谓“位置”，只是渲染层的定位策略，不影响 offsetWidth 或 getBoundingClientRect() 返回的几何尺寸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
