使用webkit-boxing- using放置容器

Question

我在这个页面上创建了一个新的主页：http://www.blacktie.co/demo/shield/

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

我要做的一件事就是试图模拟greywrap (第二个容器)是如何推送到headerwrap (主屏幕上的第一个背景图像)的。在尝试之后，我发现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中，我正在使用bootstrap-sass，但它似乎没有任何效果。有没有人能带我到这里或者告诉我我忽略了什么？

谢谢!

Answer 1

框大小调整不会影响对象的位置。

box-sizing: border-box包括声明的宽度/高度内的填充：

例如：

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;) */