Question

我很难理解定位概念，因此我创建了一个简单的代码，其中包含4个具有相同宽度和高度设置的盒子。当它定位为固定或绝对时它看起来很好而且相同，但是当用静态或相对定位时，盒子会改变比例。有人请解释一下吗？我更改框边框颜色，以便很容易区分它们

＆＃13;

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

＆＃13;

<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>

＆＃13;

您还可以在下一个链接1

上查看代码

代码输出2

Answer 1

由于您没有正确关闭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>

这导致了你的情况。只需将结束div标记更改为</div>

即可

Answer 2

以上答案是正确的。通过在每个框之后使用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>

你所拥有的CSS保持不变：

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

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

2 个答案: