HTML 和 CSS 大小调整

Question

所以我遵循了关于内容居中的教程，它是一个两列布局。 Tutorial

这是完成产品的代码:

https://jsfiddle.net/dppttuvn/

我的问题是，一旦我更改了 #wrap 宽度，然后更改了 #main 和 #sidebar 宽度，它就填充了 #wrap 宽度，布局完全搞砸了。如此链接所示:

https://jsfiddle.net/dwzvoarv/

侧边栏不在主要部分的右侧。

有人可以简要解释为什么会发生这种情况并修复它吗？

谢谢! (我还在学习 web 开发，很明显 lol)

Answer 1

这是因为 box-sizing .默认情况下，浏览器将填充和宽度分开，因此元素的总宽度基本上是 padding + width。

假设您的元素是 1000px，带有 padding-left: 100px。默认情况下，浏览器会将元素绘制为 1100px，因为宽度中不包含额外的填充(默认情况下)。

将此选择器添加到样式表的顶部...

* {
  box-sizing: border-box;
}

...这是在告诉页面上的每个元素(这就是没有父选择器的 * 选择器所做的)并设置 box-sizing它的属性设置为 border-box，这意味着浏览器现在会将 width 属性视为实际总宽度。

所以现在如果你有一个 1000px 元素 padding-left: 100px ，那么总宽度实际上仍然是 1000px 包括填充。