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包括填充INSIDE声明的宽度/高度：

例如：

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

使用webkit-boxing-sizing放置容器

1 个答案: