必须用 left 时需元素 position 为 absolute、fixed 或 sticky；static 下 left 无效；margin-left 始终生效，影响文档流布局，适用于缩进、间距、居中等场景。
选 margin-left 还是 left，取决于你是否想改变元素在文档流中的位置 —— 想让它“占位”就用 margin-left，想让它“脱离占位、自由漂移”才用 left。
什么时候必须用 left？
只有当元素的 position 是 absolute、fixed 或 sticky 时，left 才生效；static（默认值）下写 left: 20px 完全无效。
- 常见错误：给普通块级元素直接加
left: 10px，页面毫无反应 —— 因为没设position - 典型场景：弹出菜单、tooltip、固定悬浮按钮、模态框居中（配合
transform） - 注意：
left的参考点是最近的已定位祖先（position: relative/absolute/fixed），不是父容器本身；若没有，则参考视口
什么时候优先用 margin-left？
margin-left 始终有效，不依赖 position，它影响的是元素在正常文档流中的布局位置和与其他元素的间距。
- 适用场景：控制段落缩进、卡片左右间距、表单控件对齐、水平居中（
margin-left: auto; margin-right: auto;） - 百分比值是相对于包含块宽度计算的，比如
margin-left: 10%在 800px 宽容器里就是 80px - 负值合法且常用：比如
margin-left: -20px可用于微调重叠或取消父容器 padding 带来的偏移 - 内联元素（如
span）也能用margin-left，但不会影响行高，只推挤相邻内联内容
left 和 margin-left 同时存在会怎样？
它们作用机制完全不同，不会互相覆盖，但可能产生意外交互 —— 尤其当元素既是定位元素又带外边距时。
- 例如：
position: absolute; left: 50px; margin-left: 30px;，最终效果是“从定位参考点向右移 50px，再往右额外空出 30px”，即总共离参考点 80px - 容易踩坑：用
left做水平居中时（如left: 50%; transform: translateX(-50%);），如果同时写了margin-left，会干扰居中逻辑 - 性能提示：频繁动画
left会触发重排（layout），而transform更高效；margin-left动画同样触发重排，应尽量避免
别忽略 margin-inline-start 这个替代方案
如果你的项目需要支持 RTL（从右向左）语言（如阿拉伯语、希伯来语），硬写 margin-left 会导致布局翻转异常 —— 此时应改用逻辑属性。
-
margin-inline-start在 LTR 下等价于margin-left，在 RTL 下自动映射为margin-right - 它受
direction和writing-mode控制，比物理方向属性更健壮 - 兼容性已较好（Chrome 69+、Firefox 63+、Safari 15.4+），现代项目建议优先使用
真正难的不是语法，而是判断“这个偏移要不要参与文档流”——一旦混淆，就会出现元素消失、错位、响应式失效等隐蔽问题。动手前先问一句：它后面的内容该不该跟着一起让位？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
