在使用 Tailwind 的 start-[x%] 和 end-[y%] 动态控制绝对定位元素宽度时，若 start 与 end 值之和超过 100%，浏览器将无法计算有效宽度，导致元素渲染为 0px 宽——这是由 CSS 逻辑盒模型对 inset 属性（start/end 是其别名）的约束所致。
在使用 tailwind 的 `start-[x%]` 和 `end-[y%]` 动态控制绝对定位元素宽度时，若 `start` 与 `end` 值之和超过 100%，浏览器将无法计算有效宽度，导致元素渲染为 0px 宽——这是由 css 逻辑盒模型对 `inset` 属性（`start`/`end` 是其别名）的约束所致。
在构建双滑块范围选择器（如“已选区间高亮条”）时，开发者常借助 Tailwind 的逻辑方位类（如 start-[40%] end-[30%]）动态设置 元素的左右偏移，以实现响应式高亮区域。但实践中会遇到一个隐蔽却高频的问题：初始渲染正常，但拖动滑块后高亮条突然消失，DevTools 显示其宽度为 0px。
根本原因在于：Tailwind 的 start/end 类底层对应的是 CSS 的 inset-inline-start/inset-inline-end，它们属于 inset 逻辑属性族。当同时指定 start 和 end 且二者之和 ≥ 100% 时，浏览器无法推导出明确的 width（因为 width = 100% − start − end），于是回退为 auto → 在无内容、无显式宽高的绝对定位元素上，最终解析为 0px。
例如：
- start-[40%] end-[70%] → 40% + 70% = 110% > 100% → width = -10%（非法）→ 实际取 0px
- start-[25%] end-[70%] → 95%
✅ 正确解法：避免依赖 start + end 推导宽度，改用 left + right + 显式 position: absolute
Tailwind 的 left-[x%] / right-[y%] 对应标准 CSS left/right，其宽度计算逻辑更稳定（width = 100% − left − right），且不受逻辑方向约束影响，尤其适合固定方向的水平进度条场景。
<!-- ✅ 推荐：使用内联 style 控制 left/right -->
<div class="relative h-2 rounded-full bg-zinc-400">
<span class="absolute h-full rounded-full bg-zinc-600" style='{"left:#{start_px}%;' right:></span>
</div>
其中 start_px 和 end_px 是计算后的百分比数值（如 40 表示 40%），确保 start_px + end_px ≤ 100 即可安全渲染。
? 注意事项：
- 不要混合使用 start/end 与 left/right —— 它们属于不同逻辑轴，可能冲突；
- 若需支持 RTL（从右向左）布局，请统一使用 inset-inline-start/inset-inline-end 并配合 dir="rtl"，但此时仍需保证二者之和 ≤ 100%；
- 在 Phoenix LiveView 中，确保 start_end/1 函数返回的字符串严格为 "left:40%;right:30%;" 格式，避免空格或分号遗漏；
- 调试技巧：在浏览器控制台临时添加 style="border: 1px solid red;" 到 ，直观验证是否因宽度为 0 而不可见。
总结：start/end 是语义化利器，但动态范围控制场景下，显式 left/right + 内联样式是更可控、更符合直觉的方案。它绕开了 CSS 逻辑属性在边界条件下的歧义行为，让双滑块高亮条真正“随拖随现”，稳定可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
