最简百分比条形图用 div + width 实现，父容器需设明确宽度和 overflow: hidden，子条形用 height: 20px 和 border-radius 收边，避免撑出页面或文字错位。
用 div + width 实现最简百分比条形图
纯 HTML/CSS 就能做，不需要 JS 或图表库。核心就是让一个容器内部的子 div 通过 width 控制长度，再加点样式收边。
常见错误是直接写 width: 75% 却忘了父容器没设 width 或 overflow，导致撑出页面、文字换行错位。
- 父容器必须有明确宽度（比如
width: 300px或max-width: 100%），否则子元素的百分比无参照 - 子条形建议用
height: 20px固高，避免文字撑高变形 - 加
overflow: hidden到父容器，防止内容溢出破坏布局 - 别用
table或内联样式堆砌，维护成本高，响应式也难调
<div style="width: 300px; background: #eee; border-radius: 4px; overflow: hidden;"> <div style="width: 68%; height: 20px; background: #4a90e2; border-radius: 4px;"></div> </div>
用 CSS 自定义属性动态改百分比
如果数据会变（比如从 API 拿到 42%、89%），硬写死 width 值不现实。CSS 变量配合内联样式是最轻量的更新方式。
注意：CSS 变量不能直接参与 calc() 计算百分比单位，得靠 JS 注入或服务端渲染生成最终 style 属性。
立即学习“前端免费学习笔记（深入）”；
- JS 更新时，只改
element.style.width = '73%'，别动整个style字符串 - 避免在循环里反复读写
offsetWidth，会触发重排 - 移动端要注意
min-width: 0防止超小屏下条形被压缩到看不见
示例（JS 更新）：document.querySelector('.bar').style.width = data.percent + '%';
IE 兼容时 flex 条形容易塌陷
用 display: flex 做条形图在 IE10–11 下表现不稳定，尤其当父容器没设 min-width 或子项用了 flex: 1 时，width 百分比常被忽略。
不是所有场景都得兼容 IE，但如果真要保，就绕开 flex，回归传统块级流。
- IE 下优先用
display: block+width组合，别依赖flex-basis - 避免在 IE 中混用
vw单位和百分比，计算逻辑不一致 - 测试时打开 IE 开发者工具，看 computed 样式里
width是否真的生效，别只信渲染结果
带数值标签的条形图怎么对齐不越界
很多人想在条形右端显示 “75%” 文字，但直接 position: absolute 容易跑出容器，尤其百分比值变化大时（比如 5% vs 99%）。
关键不是“怎么放”，而是“怎么限制它不跑”。用 text-overflow: ellipsis 没用，得从布局源头控住。
- 把标签文字包进同一个父容器，用
display: flex+justify-content: space-between分开条形和文字 - 给文字加
white-space: nowrap和max-width: 40%（根据父宽估算），再配overflow: hidden - 别用
right: 0，改用margin-left: auto推到右侧，更稳
示例结构：<div class="bar-container">
<div class="bar" style="width: 82%"></div>
<span class="label">82%</span>
</div>
overflow: hidden 和 box-sizing: border-box —— 少一个，条形就可能多出 2px 或文字压边。数值一变，问题才浮现，别等上线才查。 
