css - 使用 CSS3 calc() 时对结果感到困惑

Question

所以，我所知道的是，在 W3C 盒子模型中，填充会增加盒子的宽度，因为宽度代表盒子内容的宽度。我相信 CSS3 的 calc() 函数允许您进行算术运算，例如从百分比宽度中减去像素宽度，是为了解决我的这个(imo 糟糕的)盒子模型引起的问题。

但是，当像这样使用 calc() 时，Firefox 和 chrome 都会给我同样奇怪的结果:

.feedpost_form {
    position: relative;
    height: 80px;
    border-bottom: 1px solid #999999;
    margin: 0;
    padding: 8px;
    width: calc(100% - 8px*2);
    background-color: rgba(0,0,0,0.1);
}
.feedpost_form textarea {
    width: calc(100%);
}

.feedpost_form 的元素宽度为 100%，符合预期。正如预期的那样，填充似乎是 8px，因为我注意到文本区域距左侧 8px。这意味着 css 宽度，以及内容的宽度，应该是元素宽度减去净水平填充。例如，如果 .feedpost_form 元素的宽度为 116px，我认为其 css 宽度(内容宽度)为 100px。

我相信 textarea 应该跨越其父内容宽度的宽度，因为它的宽度为 100%。例如，如果 .feedpost_form 的元素宽度为 116px 而 css 宽度为 100px，我认为 textarea 的宽度应为 100px 并保持在填充内。

我得到的实际结果是文本区域的宽度比预期的要大。最令人困惑的部分是它不会溢出它的容器，而只会切入正确的填充。我假设这意味着文本区域的最终宽度是 .feedpost_form 的 css 宽度 + 1/2 净填充，并将文本区域的宽度设置为 calc(100% - 8px) 确实可以解决问题。

所以这是我的问题:这是预期的结果，还是两个浏览器都犯了同样的错误？如果是有意的，我错过了什么？这不是与盒子模型矛盾吗？

Answer 1

我确实认为您对 calc 的理解是正确的，而且您得到的结果对我来说实际上是正确的。你忘记了在默认的 css boxmodel 中边框也被添加到宽度中，一个 textarea 默认有一个 1px 的边框。这就是为什么你让文本区域进入其父级的填充。

因此，如果您将这些 2px 或 1px * 2 考虑在内，它应该可以正常工作:

.feedpost_form textarea {
    width: calc(100% - 1px * 2);
} 

我将它们并排放置，以便您自己查看:http://jsfiddle.net/rmHU3/

顺便说一句，如果你如此反对默认的框模型，为什么不使用 box-sizing: border-box，这比一直计算要容易得多(尤其是如果你开始玩弄 css)http://css-tricks.com/box-sizing/