CSS max width和calc（）在这里真正做什么？

我试图理解calc（）和max width在这里真正做了什么。 从我所读到的，它需要一个表达式参数， 并计算该值

例如，如果我要创建一个网站，假设我的窗口宽度现在为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-两个填充（182）=1638px
• 左边距、右边距：190px

但是当我用这个代码打开网站的时候

• 左侧填充：99.361px
• 右侧填充：99.361px
• 元素宽度：1599.998px
• 左边距、右边距：94.276px

为什么它显示出不同于我预期的价值？

---

当计算10%时，calc中的10%在大小上引用了什么？

我假设您是从开发工具中获得的值。

padding

是使用父对象的大小计算的，因此

5%padding

实际上是

2200*5%=110

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

看

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

---

通过

计算（1600+10%）

，您是指

计算（1600px+10%）

？因为没有单位的宽度是无效的。@HaoWu是的，我刚修好，它是1600px。你确定宽度不包括填充吗？当然是空白，但我不认为填充。@SydneyY是的，宽度总是不包括填充（除了一些独立的旧浏览器）。如果您查看上面提供的图像，您可以看到元素的宽度在蓝色矩形内，然后在宽度上添加填充（绿色）。是的，您确定吗