纯 html 和 css 实现彩色方块时，若页面空白无显示，通常是因为 `
` 默认无宽高导致背景色不可见；只需为元素显式设置 `width` 和 `height` 即可解决。
在纯 HTML + CSS 构建简易“颜色旗帜”（如三色块并列代表国旗）时，一个常见误区是仅定义类名和背景色，却忽略
是无内容、无尺寸的空元素——浏览器会将其渲染为 0×0 像素，即使应用了 background-color，也完全不可见。
✅ 正确做法：为 .red、.blue、.green 元素赋予明确的尺寸。推荐两种实现方式：
方式一：统一设置所有 div 尺寸（简洁高效）
/* flag.css */
.red { background: red !important; }
.blue { background-color: blue; }
.green { background-color: green; }
/* 关键：为所有 div 设置基础尺寸 */
div {
width: 100px;
height: 60px;
display: inline-block; /* 水平排列，避免换行 */
margin: 5px; /* 可选：添加间距 */
}Color Flag
方式二：为每个类单独指定尺寸（更灵活）
立即学习“前端免费学习笔记（深入）”；
.red {
background: red;
width: 100px;
height: 60px;
display: inline-block;
}
.blue {
background-color: blue;
width: 100px;
height: 60px;
display: inline-block;
}
.green {
background-color: green;
width: 100px;
height: 60px;
display: inline-block;
}⚠️ 注意事项：
- 避免滥用 !important（如 .red 中），除非有强优先级冲突；此处仅设背景色，无需强制；
- 确保 HTML 中正确引入 CSS 文件（路径大小写敏感，flag.css 与 flag.html 应在同一目录）；
- 若仍不显示，请检查浏览器开发者工具（F12）→ Elements 面板，确认元素是否被渲染、尺寸是否生效、CSS 是否加载成功；
- 如需响应式适配，可用 vw、rem 或媒体查询替代固定像素值。
通过显式声明尺寸并合理布局，即可稳定呈现红、蓝、绿三色旗帜方块——这是纯前端实现色彩可视化最基础也最关键的一步。
