block 和 bar 的区别

在前端开发中，“block”和“bar”是两个常被提及但含义完全不同的术语。它们分别属于不同的语境：一个是 HTML/CSS 布局模型中的基本概念，另一个通常是 UI 组件或视觉元素的统称。

什么是 block？

block 是 CSS 中的一种显示类型（display type），用于描述 HTML 元素在页面中的布局行为。

• 块级元素（block-level elements）会独占一行。
• 可以设置宽度、高度、内外边距等。
• 常见块级元素包括：<div>、<p>、<h1> ～ <h6>、<section> 等。

<div>第一个块</div>
<div>第二个块</div>

什么是 bar？

bar 并不是 HTML 或 CSS 的标准术语，而是对一类

• 进度条（Progress Bar）：显示任务完成百分比。
• 工具栏（Toolbar）：包含按钮或操作项的横条。
• 导航栏（Navigation Bar）：网站顶部的菜单区域。

这些“bar”通常由多个 HTML 元素组合而成，并通过 CSS 设置为横向排列（如使用 display: flex），其本质可能是 block、inline-block 或 flex 容器。

<div style="width: 100%; height: 20px; background: #eee;">
  <div style="width: 60%; height: 100%; background: #3498db;"></div>
</div>

核心区别总结