html - CSS 边框问题

Question

我目前正在尝试制作一个内部有 4 个小方 block 的正方形，但我在尝试做的方式上遇到了麻烦。所以这是代码:

#grandbox {
  position: absolute;
  width: 204px;
  height: 204px;
  border: solid thin black;
  left: 40%;
  top: 8%;
}
div.smallbox {
  border: solid thin black;
  text-align: center;
  width: 100px;
  height: 100px;
  float: left;
  line-height: 100px;
}

<div id="grandbox">
  <div class="smallbox"></div>
  <div class="smallbox"></div>
  <div class="smallbox"></div>
  <div class="smallbox"></div>
</div>

我想制作边框的 css 样式:

border: 2px solid black

但如果我这样做，盒子就会脱离更大的盒子并垂直显示。

我是新手，因为我目前刚开始我的职业生涯，但我不明白为什么它不起作用。

PS:对不起，如果英语不好，不是我的母语。

Answer 1

通常，边框宽度会添加到给定的宽度上。使用 box-sizing: border-box; 规则，您可以将边框包含在宽度中，这样您就不会再中断了。看到这个片段:

#grandbox {
  position: absolute;
  width: 200px;
  height: 200px;
  border: solid thin black;
  left: 40%;
  top: 8%;
}
div.smallbox {
  border: solid thin black;
  text-align: center;
  width: 100px;
  height: 100px;
  float: left;
  line-height: 100px;
  box-sizing: border-box;
}

<div id="grandbox">
  <div class="smallbox"></div>
  <div class="smallbox"></div>
  <div class="smallbox"></div>
  <div class="smallbox"></div>
</div>

参见 https://developer.mozilla.org/de/docs/Web/CSS/box-sizing有关框大小调整的更多信息。