html - 如何在html中的框中制作框

Question

body,
html {
  background-color: blue;
  height: 100%;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: pink;
  height: 50%;
  width: 50%;
}

.child {
  position: absolute;
  background: grey;
  height: 10%;
  width: 10%;
}

<div class="container">
  <div class="box">
    <div class="box child"></div>
    <div class="box child"></div>
    <div class="box child"></div>
  </div>
</div>

所以我一直试图在一个盒子(盒子)中制作盒子(盒子 child )，但即使我复制并粘贴了一堆盒子 child ，它也没有让我创建多个。

这是我第一次做 html，所以如果你能像你向一个 8 岁的 child 解释一样解释，我将不胜感激。

Answer 1

position:absolute 是您的问题。这会将框定位在其容器内的 0,0(左上角)，因此每个框(不指定 left、right、top 或 bottom 将从这个位置开始。也就是说，你所有的盒子都放在彼此的顶部。尽可能避免使用绝对位置，让内容自然下落，然后用其他值(如填充和边距)移动它.