纯 html 和 css 实现彩色色块时，若页面空白无显示，通常是因为未设置 `
` 的宽高——空元素默认尺寸为 0×0，无法呈现背景色。
在构建简易国旗色块（如三色横条旗）时，仅定义 .red、.blue、.green 等类并赋予 background-color 是不够的。HTML 中的
是块级空元素，当内部无内容（文本、图片、伪元素等）且未显式声明尺寸时，其计算高度和宽度均为 0px，导致背景色完全不可见——这正是 flag.html 打开后“什么也不显示”的根本原因。
✅ 正确做法是：为色块元素明确指定 width 和 height。推荐通过通用规则统一设置，既简洁又利于维护：
/* flag.css */
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
/* 关键：为所有色块设定基础尺寸 */
.flag-strip {
width: 150px;
height: 40px;
}对应 HTML 结构（建议添加语义化 class 名）：
三色旗示例
? 进阶提示：
立即学习“前端免费学习笔记（深入）”；
- 避免滥用 !important（如原 .red 中的 background: red !important;），它会破坏 CSS 层叠逻辑，增加调试难度；仅在必要覆盖场景下谨慎使用。
- 若需垂直排列色块（如荷兰旗），可添加 display: block; margin: 2px 0; 保证间距；若需水平排列（如爱尔兰旗），可设 display: inline-block; vertical-align: top; 并清除行内间隙。
- 响应式需求下，推荐使用 rem 或 vh/vw 单位替代固定像素（例如 height: 10vh; width: 30vw;），提升适配性。
总结：CSS 背景色生效的前提是元素具有可渲染的几何空间。始终检查空
的尺寸声明——这是纯静态旗帜实现中最常见也最易忽略的关键点。
