为什么会这样：
width: 98%;
max-width: 1140px;
做同样的事情
width: 1140px;
max-width: 98%;
第一个是有道理的，因为我说宽度是 98%，但宽度不要超过 1140 像素。
然而，第二个会说页面是 1140 像素宽，但会像 98% 的页面一样大，对吗？所以例如过去 1140 像素......但显然不是，因为它与第一个相同。
谁能解释一下原因？
【问题讨论】：
标签： css
根据我对属性的理解：
if width > max-width use max-width
if max-width > width use width
因此，使用您的示例，这必须意味着 1140px 在您正在查看的屏幕分辨率下严格小于 98%。
缩小你的浏览器屏幕，你会得到不同的结果。
这有点不相关，但我发现 max-width（和相应的属性 max-height）是 Internet Explorer 中的图像问题，并发现这有助于哄骗它使用正确的值：
img {
max-width: 150px;
max-height: 120px;
width: auto !important;
height: auto !important;
}
如果没有最后两个属性，大多数符合标准的浏览器都能正确保持纵横比，但 Internet Explorer 不会，除非你这样做。
编辑：看来我和其他人的回答基本相同。
【讨论】：
如果您设置固定的width 和max-width，则表示如下：
如果宽度超过max-width，则保持在max-width。
如果宽度低于max-width，则保持在width。
它永远不会超过max-width，这并不意味着它不能停留在下面，max 关键字显然表示限制而不是规则。
【讨论】：
在你的第一个例子中
width: 98%;
max-width: 1140px;
您是在告诉浏览器提供屏幕 98% 的宽度，但不大于 1140 像素。
在你的第二个例子中，
width: 1140px;
max-width: 98%;
您是在告诉浏览器提供 1140 像素的宽度，但不大于浏览器的 98%。
但是，在第二种情况下，您的屏幕尺寸需要小于 1140 像素才能启动最大宽度值。
另请注意max-width 在许多旧版本的 IE 中存在缺陷。
【讨论】：
假设容器是您的浏览器窗口，如果您的屏幕分辨率为 1280 像素，那么 98% 将是 1254 像素，这仍然大于 1140 像素。所以你看不出有什么区别。尝试移至较低的分辨率，例如 1024 像素
【讨论】：
width 设置为 1140 像素，而您的 max-width 设置为 98%。这意味着它不会超过 98%，没有人说低于 98%
1140px，但max-width 仅表示一个限制。这意味着它永远不会延伸到max-width，只会收缩。
可能在您的第一种情况下，98% 等于或大于 1140 像素，因此它将保持在 1140 像素。
当然是第二种情况，宽度是1140px，所以会坚持1140px，max-width就没用了。
更新 在这里试试http://jsfiddle.net/
【讨论】：
这是我对它们的理解.. 它们是 2 个框 -> width 和 max -width 。
width 不能超过 max-width 如果宽度没有效果。 同样，如果您定义的 max-width 低于 width .. width 没有效果。
您的浏览器随时将您的百分比转换为最可能的像素 但上述规则仍然适用。
例子：
width: 98%;
max-width: 1140px;
这被翻译成：
width : 1960px;
max-width : 1140px;
这意味着 -> 只有最大宽度适用。
width: 1140px;
max-width: 98%;
这被翻译成：
width : 1140;
max-width : 1960px;
这意味着 -> 宽度为 1140 但不能超过 1960。
【讨论】：
这两个选项应该基本上产生相同的结果，即使宽度小于1140px，例如500px:
第一种情况：
width = min(98% * 500px, 1140px) = min(490px, 1140px) = 490px;
第二种情况：
width = min(1140px, 98% * 500px) = min(1140px, 490px) = 490px;
但是，如果您在 fieldset 元素中使用第二个选项，则某些浏览器会出现问题，尤其是 firefox 12.0。见here。拖动浏览器窗口，您会注意到第一个使用百分比max-width 的input 元素没有正确响应。
因此，请使用第一个选项：
width: percentage;
max-width: pixels;
【讨论】：
width - 这个css属性用来设置宽度（固定宽度），这种情况下宽度是固定的。
示例： .property-集{ 宽度：200px； }
这个设置固定宽度即200px
max-width - 这个css属性用来设置宽度，但是这个宽度可能小于设置的值，但是max limit是用户设置的值。
示例： .property-集{ 最大宽度：200px； }
此设置最大宽度即 200px，这意味着宽度可能小于 200px 但不超过 200px
谢谢..
【讨论】：
【讨论】：
anyElement {
width: 600px;
}
这仅仅意味着元素应该一直保持 600 像素，而不管它周围发生了什么。无论父元素或浏览器窗口是大于还是小于 600px。它将始终保持 600 像素。
Max-width 告诉浏览器： 无论涉及何种情况，请不要超过我在这里写的这个宽度。我的意思是，当你需要的时候，你可能会小于我分配的宽度，但永远不要超过我在这里放的这个宽度。不用考虑。
【讨论】：