Css 4个箱子的代码相同，输出不同

我正在努力理解定位的概念，所以我创建了一个简单的代码，其中包括4个具有相同宽度和高度设置的框。当定位为固定或绝对时，它看起来很好且完全相同，但当定位为静态或相对时，框的比例会改变。有人能解释一下吗？我改变了框的边框颜色，这样可以很容易地区分它们

.box{
位置：静态；
文本对齐：居中；
宽度：300px；
边界：25px固体；
填充：25px；
利润率：25px；
喜欢的重量：更大胆；
}

Box1
框2
框3
方框4

由于您没有正确关闭div元素，浏览器会尝试为您纠正错误，但在这个过程中会创建不同的层次结构。大概是这样的：

<div class="box" style="border-color:green;">Box1
  <div>
    <div class="box" style="border-color:yellow;">Box2
      <div>
        <div class="box" style="border-color:blue;">Box3
          <div>
            <div class="box" style="border-color:pink;">Box4
              <div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Box1
框2
框3
方框4

---

这导致了你的处境。只需将结束div标记更改为

以上答案是正确的。通过在每个框后使用div而不是/div，您实际上是在嵌套这些框

以下是更正后的HTML：

<div class="box" style="border-color:green;">Box1
</div>
<div class="box" style="border-color:yellow;">Box2
</div>
<div class="box" style="border-color:blue;">Box3
</div>
<div class="box" style="border-color:pink;">Box4
</div>

---

你没有正确关闭divs标签。应该是

谢谢您的支持和耐心！

.box {
  position: static;
  text-align: center;
  width: 300px;
  border: 25px solid;
  padding: 25px;
  margin: 25px;
  fond-weight: bolder;
}