用 width 百分比做条形图，前提是数据已知且静态
纯 css 条形图只能在数据固定、不需交互或更新时用——因为 width 是硬编码值，没法自动读取 js 数组或 API 返回的数字。如果你后端吐出的是 HTML 模板（比如 django/Jinja 渲染），那可以提前把 width: 65% 写死进去；但要是想动态改宽度，就得靠 JS 更新 style.width 或切换 class。
- 适合场景：后台报表页、邮件中的静态图表、设计稿切图替代方案
- 不适合场景：实时销量看板、用户筛选后的响应式图表、需要 hover 提示或点击跳转的地方
- 百分比基准是父容器宽度，务必确保父元素有明确
width或max-width，否则width: 80%可能撑满整个 viewport
height 和 line-height 控制条高与文字垂直居中
条形图的“条”本质是块级元素，高度靠 height 或 min-height 设定；文字贴在条右侧或内部，得用 line-height 匹配高度才能垂直居中，否则会偏上或溢出。
- 若条高
height: 24px，文字line-height: 24px才能对齐，设成20px就会留白 - 用
flex更稳：display: flex; align-items: center;，但老版本 ios safari 对flex的align-items支持弱，慎用 - 文字过长要截断：
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
颜色、边距、动画这些细节决定是否像“图表”
纯 width 条形图容易看起来像进度条，加点视觉区分才像数据展示：背景色区分数值高低、条之间留空隙、悬停加轻微缩放或阴影。
- 相邻条间距用
margin-bottom，别用padding——后者会撑大条本身，影响width计算基准 - 渐变色条？可以：
background: linear-gradient(90deg, #4a90e2, #50e3c2);，但 IE 不支持，得备个单色background-color - 加过渡动画？
transition: width 0.3s ease-in-out;，但只对初始渲染生效；JS 修改宽度时才会触发动画
IE 和低版本 Safari 下 width 百分比可能错位
某些旧版浏览器对子元素 width 百分比计算异常，尤其当父容器用了 display: table-cell 或含 box-sizing: border-box 但没重置 padding 时。
立即学习“前端免费学习笔记（深入）”；
- 必加
box-sizing: border-box;到所有条元素，避免padding撑宽 - 避免在父容器上用
font-size: 0;清除 inline 元素间隙——它会让em/rem单位失效，影响响应式 - 真要兼容 IE11？放弃
flex布局，用Float: left+clear: both，但维护成本陡增
实际项目里，真正卡住的往往不是怎么写 width: 72%，而是数据从哪来、谁负责把 72 这个数字塞进 HTML、以及当某条数据是 0 或负数时，要不要显示空白条或加特殊 class。这些逻辑不在 CSS 层面，但决定了你写的那行 width 到底有没有意义。