CSS：宽度和最大宽度

为什么：

width: 98%;
max-width: 1140px;

照做

width: 1140px;
max-width: 98%;

第一个是有意义的，因为我说的宽度是98%，但不要超过1140px宽

第二个会说页面的宽度是1140px，但会和98%的页面一样大，对吗？比如说，超过1140px。。。但显然不是，因为它和第一个一样

---

有人能解释一下原因吗？

假设容器是您的浏览器窗口，如果您的屏幕分辨率为1280 px，那么98%将是1254 px，仍然大于1140 px。所以你看不出有什么不同。尝试移动到较低的分辨率，例如1024px，在第一种情况下，98%可能等于或大于1140px，因此它将保持在1140px

当然，在第二种情况下，宽度是1140px，因此它将保持在1140px，并且最大宽度将变得无用

更新 在第一个示例中，请在此处尝试

width: 98%;
max-width: 1140px;

您正在告诉浏览器提供98%的屏幕宽度，但不大于1140px

在你的第二个例子中

width: 1140px;
max-width: 98%;

您告诉浏览器的宽度为1140px，但不大于浏览器的98%

但是，在第二种情况下，您的屏幕大小需要小于1140px，最大宽度值才能生效

还要注意

max width

在许多旧版本的IE中都有缺陷

---

请阅读此处的详细信息：

如果您设置了固定的

宽度和
最大宽度，这意味着：

如果宽度超过
max width
，请将其保持在
max width
。
如果宽度低于
最大宽度
，请将其保持在
宽度
上

它永远不会超过
max width
，但这并不意味着它不能保持在
max
关键字下，它显然表示限制而不是规则。
根据我对属性的理解：

如果宽度>最大宽度使用最大宽度
如果最大宽度>宽度，请使用宽度

因此，以您的例子来说，这一定意味着1140px在您正在查看的屏幕分辨率下严格小于98%

缩小浏览器屏幕，您将得到不同的结果

这有点不相关，但我发现Internet Explorer中的图像存在问题
max width
（以及相应的属性
max height
），并发现这有助于引导它使用正确的值：

img{
最大宽度：150px；
最大高度：120px；
宽度：自动！重要；
高度：自动！重要；
}

如果没有最后两个属性，大多数符合标准的浏览器都会正确地保持纵横比，但除非您这样做，否则Internet Explorer不会

编辑：看起来我说的答案与其他人的答案基本相同。
这两个选项基本上应该产生相同的结果，即使宽度小于
1140px
，例如
500px
：

在第一种情况下：

width = min(98% * 500px, 1140px) = min(490px, 1140px) = 490px;

在第二种情况下：

width = min(1140px, 98% * 500px) = min(1140px, 490px) = 490px;

但是，如果在
字段集
元素中使用第二个选项，则某些浏览器会出现问题，尤其是firefox 12.0。看见拖动浏览器窗口，您会注意到使用百分比
最大宽度的第一个
输入
元素没有正确响应

因此，请使用第一个选项：

width: percentage;
max-width: pixels;

宽度-此css属性用于设置宽度（固定宽度），在本例中，宽度是固定的

例如：
.属性集{
宽度：200px；
}

此设置为固定宽度，即200px

最大宽度-此css属性用于设置宽度，但在此宽度中，宽度可能小于设置的值，但最大限制是用户设置的值

例如：
.属性集{
最大宽度：200px；
}

此设置的最大宽度为200px，这意味着宽度可能小于200px，但不超过200px

谢谢..
以下是我对他们的理解。。
它们是两个盒子->宽度和最大宽度

如果宽度没有影响，则宽度不能超过最大宽度。
如果定义的最大宽度小于宽度，则与wise类似。。宽度没有影响

在任何时候，浏览器都会将%转换为最可能的像素
但上述规则仍然适用

示例：

width: 98%;
max-width: 1140px;

这被翻译成：

width : 1960px;
max-width : 1140px;

width : 1140;
max-width : 1960px;

这意味着->仅应用最大宽度

width: 1140px;
max-width: 98%;

这被翻译成：

width : 1960px;
max-width : 1140px;

width : 1140;
max-width : 1960px;

这意味着->宽度为1140，但不能超过1960。
仅限使用

max-width: 1140px;

或

不是两者都有。
如果你想看到差异消失。
是的，但是为什么它不扩展到1140px以上，因为最大宽度设置为98%，所以它肯定是视图的98%，如果视图为1600px，那么它将超过1140，对吗？不，你的
宽度设置为1140px，你的
最大宽度设置为98%。这意味着它不会超过98%，没有人说会低于98%，但如果我在1600px的屏幕上观看，98%会比1140px大，那么为什么它不会延伸到这一点呢？宽度不应该阻止它，因为我告诉它，最大宽度可以是98%，而不是一个固定的大小。正如我所说，98%可能大于
1140px
，但
max width
只表示一个限制。这意味着它将永远不会拉伸到
最大宽度，只会收缩。这不会导致您将固定宽度设置为1140px，正如我在回答的评论中所说，最大宽度并不是无用的，因为它可以保持容器98%，但在两个版本中都不会超过1140px……然后您只需执行宽度：98%；这将给你关于宽度和最大宽度的完整知识：你的新答案对现有答案有什么价值？它真的回答了这个问题吗？我不这么认为。