CSS max-width 和 calc() 在这里真正做了什么？

Question

我试图了解 calc() 和 max-width 在这里的真正作用。 根据我从MDN 读到的内容，它采用单个表达式参数， 并计算该值。

例如，如果我要创建一个网站，假设我的窗口宽度现在是 2200px。

max-width: calc(1600px+10%);
margin: 0 auto;
padding-left: 5%;
padding-right: 5%;

据我了解，我的最大宽度应该是

1600 + 2200 * 10% = 1600 + 220 = 1820

结果

• 左边距：5% = 1820 * 5% = 91px
• 右内边距：5% = 1820 * 5% = 91px
• 元素大小：1820 - 两个 padding(182) = 1638px
• margin-left,right: 各190px

但是当我用这段代码打开网站时，它给了我，

• padding-left：99.361px
• 右填充：99.361px
• 元素宽度：1599.998px
• margin-left,right: 94.276px 每个

为什么它显示的值与我预期的不同？ 计算 10% 时 calc 中的 10% 是指什么？

Answer 1

我假设您正在从开发工具中获取值。 padding 是使用父级的大小计算的，所以 5% padding 实际上是 2200 * 5% = 110。

其次，元素宽度不包括边距或内边距，因此 1820 将是​​不包括内边距的元素大小。

见fiddle

从下图中可以看出，父级宽度约为 2200 像素（我必须缩小，所以它不完全是 2200），所有内容的大小都正确。确保没有任何其他规则正在修改元素。