CSS：对一些简单的数学感到困惑

Question

我在this page处有以下CSS：

#left {
  display: table-cell;
  float: left;
  width: 20%;
  padding: 2.5%;
}
#right {
  display: table-cell;
  float: right;
  width: 75%;
}

我相信2.5 + 20 + 2.5 + 75 = 100。

但是，#left和#right之间存在较大差距。那为什么？我认为#left和#right会占用#main的所有内容。

此外，如何重置#footer，以便它排在#left下面？

谢谢。

Answer 1

因为你正在使用box-sizing：border-box;作为重置css的一部分。只需评论/删除即可重试。

* {
box-sizing: border-box;
margin: 0;
padding: 0;

}

还建议使用下面的结构来修复页脚问题。

<div id="main">
<div id="wrap">
    <div id="left">Left</div>
    <div id="right">Right</div>
</div>
<div id="footer">Footer</div></div>

Answer 2

box-sizing属性使您感到困惑 - 这会导致填充占用元素内部空间而不是拉伸元素，这就是浏览器通常的行为方式。因此，通过使用box-sizing属性和宽度：20％，浏览器只会以20％的宽度绘制此元素，而不是在任何一侧添加额外的2.5％。

如果您将宽度设置为25％并保持大小调整，那么它的行为与您期望的一样。

这里a good explanation of box-sizing by Paul Irish应该解释发生了什么（以及another from CSS Tricks）。

Answer 3

填充没有添加到宽度，因为你在所有元素上都有'box-sizing：border-box'。阅读here。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}