跳转到主内容
新派编程网 - 新潮编程理念，全新技术课堂！
📁 网站地图

html如何做百分比条形统计图

林译川
林译川
• 👁 0人浏览过
最简百分比条形图用 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
或内联样式堆砌，维护成本高，响应式也难调
用 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 + '%';
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更 下载 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
推到右侧，更稳 示例结构：
82%
实际做时最容易漏的是父容器的
overflow: hidden
和
box-sizing: border-box
—— 少一个，条形就可能多出 2px 或文字压边。数值一变，问题才浮现，别等上线才查。

相关文章