使用CSS3 calc（）时被结果弄糊涂

所以，我知道的是，在W3C盒子模型中，填充会增加盒子的宽度，因为宽度代表盒子内容的宽度。我相信CSS3的calc（）函数，它允许你做算术运算，比如从一个百分比宽度中减去一个像素宽度，是为了解决我的this（imo可怕的）box模型所引起的问题

然而，Firefox和chrome在这样使用calc（）时都给了我同样奇怪的结果：

.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_表单元素的宽度是116px，我认为它的css宽度（内容宽度）是100px

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

我得到的实际结果是textarea的宽度比预期的要大。最令人困惑的是，它不会溢出它的容器，而只会切入正确的填充。我假设这意味着textarea的结果宽度是.feedpost_表单的css宽度+1/2净填充，将textarea的宽度设置为calc（100%-8px）就解决了这个问题

---

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

我确实认为您正确地理解了calc，并且您得到的结果在我看来是正确的。您忘记了边框也会添加到默认css boxmodel中的宽度中，并且默认情况下textarea具有1px边框。这就是为什么textarea会运行到其父级的填充中

因此，如果您将这些2px考虑在内，或者像您喜欢说的那样

1px*2

，它应该可以正常工作：

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

我将它们并排放置，以便您可以亲自查看：

---

顺便说一句，如果你如此反对默认的框模型，为什么不使用

框大小：边框框

，这比一直计算要容易得多（特别是如果你开始玩css）

8px*2

没有任何意义，因为它永远不会被动态更改。@Connor:它是常量，但它对于可读性来说非常有意义。他的填充物是

8px

——他想让它匹配。我想，但这同样好

calc（100%-16px）；/*如果您有一个像Sublime这样的文本编辑器，那么像这样将其分解为两倍的填充*/

确实会使它变得更容易。我可以选择填充，按Ctrl+D，然后只需键入一次新填充。小细节；更改填充比更改其他任何内容都更有趣。看起来默认边框要厚得多，但我认为这取决于系统。但是，将边框设置为自定义会使其完全按照您描述的方式工作：D谢谢！请注意，在我的小提琴中，我使用了规范化css选项，它重置了所有浏览器默认的边距、填充、边框等，。。。用于跨浏览器的一致性。我建议您随时使用某种重置/规范化CSS！