Html 使用webkit装箱大小调整放置容器

我正在基于此页面构建一个新主页：

我不只是复制和替换文本，而是尝试通过重新创建片段和学习不同部分如何相互影响来学习HTML和CSS

我陷入困境的一个部分是，试图模拟灰色的第二个容器如何将主屏幕上的第一个背景图像推到头部。在使用它之后，我发现bootstrap.css中的以下内容似乎控制了该部分，因为删除它会破坏样式：

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

我了解到星号是通用选择器，因此它适用于所有样式。我把它添加到我的page.css.scss中，我使用的是引导式sass，但它似乎没有任何效果。有人能带我到这儿来吗？或者给我看看我在看什么

---

谢谢

框大小不会影响对象的放置

框大小：边框框包括声明宽度/高度内的填充：

例如：

---

我不明白你想模仿那个灰色地带在做什么。这只是一个灰色背景的div，我想模拟一下“容器”在浏览器中向上推着背景图像。目前，我的布局只是将图像拉伸到页面的长度，我希望对其进行限制。我只是将图像的宽度缩小，使其不适合屏幕。谢谢你的帮助！这个高度是图像的高度吗？我只是想限制长度，这样它就可以显示第二个容器的峰值，就像它在演示中一样。

div { height: 100px; padding: 10px; } /* total height: 120px (100 + 10 + 10) */
div { height: 100px; padding: 10px; box-sizing: border-box } /* total height: 100px (100px height with an INSIDE padding of 10px;) */