Question

为什么：

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

和

一样

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

第一个是有道理的，因为我说宽度是98％，但不要大于1140px宽。

然而，第二个会说这个页面的宽度是1140px，但是那样的页面会比98％的页面大吗？例如，过去1140px ......但显然不是，因为它与第一次相同。

有人可以解释原因吗？

Answer 1

根据我对属性的理解：

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不会。

编辑：看起来我和其他人的答案基本相同。

Answer 2

在你的第一个例子中

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

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

在你的第二个例子中，

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

您告诉浏览器宽度为1140像素但不超过浏览器的98％。

但是，在第二个例子中，您的屏幕尺寸需要小于1140px才能启动最大宽度值。

另请注意 max-width在许多旧版IE中都有错误。

在此处阅读更多内容：http://reference.sitepoint.com/css/max-width

Answer 3

如果您设置固定的width和max-width，则表示以下内容：

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

永远不会超过max-width，这并不意味着它不能保持不变，max关键字显然表示限制而非规则。

Answer 4

假设容器是您的浏览器窗口，如果您使用1280像素的屏幕分辨率，那么98％将是1254像素，仍然大于1140像素。所以你看不出任何区别。尝试移动到较低分辨率，如1024px

Answer 5

可能在你的第一种情况下98％等于或大于1140px，所以它会坚持在1140px。

在第二种情况下，宽度为1140px，因此它会粘到1140px，最大宽度变得无用。

<强>更新在这里试试http://jsfiddle.net/

Answer 6

这是我理解他们的方式.. 他们是2盒 - ＆gt;宽度和最大宽度。

如果宽度无效，

宽度不能超过最大宽度。如果你定义的最大宽度低于宽度，那就明智了。宽度没有效果。

您的浏览器会随时将您的％转换为最可能的像素但上述规则仍然适用。

示例：

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

这被翻译为：

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

这意味着 - ＆gt;仅适用最大宽度。

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

这被翻译为：

width : 1140;
max-width : 1960px;

这意味着 - ＆gt;宽度为1140但不能超过1960年。

Answer 7

这两个选项应该基本上产生相同的结果，即使宽度小于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。拖动浏览器窗口，您会发现使用百分比input的第一个max-width元素无法正确响应。

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

width: percentage;
max-width: pixels;

Answer 8

width - 此css属性用于设置宽度（固定宽度），在这种情况下宽度是固定的。

实施例： .property集{ 宽度：200px; }

这设定固定宽度，即200px

max-width - 此css属性用于设置宽度，但此宽度可能小于设置的值，但max limit是用户设置的值。

实施例： .property集{ 最大宽度：200px; }

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

谢谢..

Answer 9

仅使用

max-width: 1140px;

或

width: 98%;

不是两者。如果您想查看区别，请here。

CSS：宽度和最大宽度

9 个答案: