Question

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

然而，当使用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，正如预期的那样，因为我注意到textarea从左边开始是8px。这意味着css宽度，因此内容的宽度，应该是元素宽度减去净水平填充。例如，如果.feedpost_form元素的宽度为116px，我相信它的css宽度（内容宽度）为100px。

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

我得到的实际结果是textarea的宽度大于预期。最令人困惑的部分是它不会溢出它的容器，而只是切入正确的填充。我想这意味着textarea的最终宽度是.feedpost_form的css宽度+ 1/2净填充，并且将textarea的宽度设置为calc（100％ - 8px）确实解决了这个问题。

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

Answer 1

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

因此，如果您将这些2px考虑在内，或者根据您的意愿考虑1px * 2，那么它应该可以正常工作：

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

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

顺便说一句，如果你反对默认的盒子模型，为什么不使用box-sizing: border-box，这比计算所有时间要容易得多（特别是如果你开始玩css）{{ 3}}

使用CSS3 calc（）时被结果混淆

1 个答案: