CSS制作老挝国旗问题：蓝色区块显示为椭圆形的解决咨询

问题说明 #

老师布置了使用CSS制作老挝国旗的任务，HTML代码固定不可修改。我编写的CSS存在两个问题：

• 蓝色区块显示为椭圆形，只有添加border-radius: 0px能将其改为矩形，但该属性不在老师提供的参考答案中；
• 文本未调大尺寸，也未设置margin: 0，不符合预期效果。

预期效果：红色背景的矩形旗帜，中间是蓝色横条，蓝色条内有居中的白色圆圈，圆圈内显示黑色文字"of Laos"；旗帜顶部显示居中的白色文字"The Flag"。

固定HTML代码 #

<body>
<div class="flag">
<p>The Flag</p>
<div>
<div>
<p>of Laos</p>
</div>
</div>
</div>
</body>

老师提供的CSS参考答案 #

.flag{
  width: 900px;
  height: 600px;
  background-color: #CE1126; /* this is red */
  position: relative;
}

.flag > div{
  width: 100%;
  height: 300px;
  background-color: #002868; /* this is blue */
  position: absolute;
  top: 150px;
}

.flag > div > div{
  width: 200px;
  height: 200px;
  background-color: white;
  border-radius: 50%;
  position: relative;
  top: 50px;
  left: 350px;
}

p{
  margin: 0;
  font-size: 5rem;
  text-align: center;
  color: white;
}

div div p{color: black;}  

我编写的CSS代码 #

.flag{
 width: 900px;
height: 600px;
background-color: #CE1126; /* this is red */
position: relative;
}

.flag > div{
width: 100%;
height: 300px;
background-color: #002868;  /* this is blue */
border-radius: 0px;
position: relative;
top: 100px;
left: 0px;
}

div div{
width: 200px;
height: 200px;
background-color: white;
border-radius: 50%;
text-align: center;
position: relative;
top: 20%;
left: 300px;
}  

问题解决方法 #

1. 修复蓝色区块形状：将.flag > div的position: relative改为position: absolute，并设置top:150px。绝对定位会让蓝色块脱离文档流，不受上方<p>元素的布局影响，自然呈现矩形，无需额外添加border-radius:0px（默认值即为0）。
2. 调整文本样式：补充p元素的全局样式，设置margin:0消除默认边距，font-size:5rem放大文字，text-align:center让文字居中；同时添加div div p{color: black;}，保证白色圆圈内的文字为黑色。
3. 修正白色圆圈定位：将.flag > div > div的left设为350px（(900px-200px)/2），top设为50px（(300px-200px)/2），让圆圈在蓝色块内居中显示。

内容的提问来源于stack exchange，提问作者Osamu Midoriya