使用<div>配合CSS可灵活创建长条矩形：一、固定宽高纯色；二、响应式视口百分比；三、伪元素无DOM生成；四、圆角阴影美化；五、Flex布局内嵌对齐。
如果您希望在网页中插入一个长条形的矩形元素，HTML5 提供了语义化与结构化的方式，但实际呈现依赖于 CSS 控制尺寸与视觉样式。使用 <div> 元素配合宽度、高度和背景色是最直接有效的方法。以下是具体实现步骤：
一、使用 div 设置固定宽高与纯色背景
通过设置 div 的 width 和 height 属性，并指定 background-color，可生成一个无内容的长条矩形块。该方法适用于需要精确控制尺寸与位置的场景。
1、在 HTML 文件的 body 内添加一个空的 <div> 标签，例如：<div class="long-bar"></div>。
2、在 <style> 标签或外部 CSS 文件中为该类定义样式：.long-bar { width: 300px; height: 24px; background-color: #4a90e2; }。
立即学习“前端免费学习笔记（深入）”；
3、保存文件并在浏览器中刷新查看效果，此时页面将显示一条宽 300 像素、高 24 像素、蓝色背景的长条矩形。
二、使用 div 设置响应式长条（基于视口百分比）
当需要长条随屏幕宽度动态伸缩时，可采用 vw 或 % 单位定义宽度，保持高度固定或按比例缩放，确保在不同设备上维持长条形态。
1、编写 HTML 结构：<div class="responsive-bar"></div>。
2、添加 CSS 规则：.responsive-bar { width: 80vw; height: 16px; background-color: #ff6b6b; }。
3、该长条将占据视口宽度的 80%，高度恒为 16 像素，背景为珊瑚红色。
三、使用 div 配合伪元素绘制无 HTML 内容的长条
若需避免额外 DOM 节点或实现装饰性长条（如分隔线、进度提示），可通过 :before 或 :after 伪元素生成矩形，不依赖真实子元素。
1、创建一个容器 div：<div class="bar-container"></div>。
2、为其添加伪元素样式：.bar-container::before { content: ""; display: block; width: 100%; height: 8px; background-color: #2ecc71; }。
3、此方式使容器自身无需设置背景或尺寸，所有视觉表现由伪元素承担。
四、使用 div 设置带圆角与阴影的长条矩形
为提升视觉层次，可在基础长条上叠加 border-radius 和 box-shadow 属性，使其呈现现代 UI 风格的长条元素。
1、定义 HTML：<div class="styled-bar"></div>。
2、编写 CSS：.styled-bar { width: 400px; height: 32px; background-color: #9b59b6; border-radius: 16px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }。
3、渲染结果为一条紫罗兰色、两端半圆、略带投影的长条矩形。
五、使用 div 与 flex 容器内嵌长条并控制对齐
当长条需作为布局组件嵌入弹性容器（如导航栏、卡片头部）时，利用 flex 属性可精准控制其在父容器中的尺寸分配与对齐方式。
1、构建 flex 容器：<div class="flex-container"><div class="flex-bar"></div></div>。
2、设置容器为 flex：.flex-container { display: flex; align-items: center; }。
3、设定长条样式：.flex-bar { width: 200px; height: 12px; background-color: #f39c12; flex-shrink: 0; }。
