2

所以，我所知道的是，在 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，因为我注意到 textarea 距离左侧 8px。这意味着 css 宽度以及内容的宽度应该是元素宽度减去净水平填充。例如，如果 .feedpost_form 元素是 116px 宽，我相信它的 css 宽度（内容宽度）是 100px。

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

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

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

4

1 回答 1

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）http://css-tricks.com/盒子尺寸/

于 2013-07-25T19:34:50.387 回答