CSS：宽度和最大宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6456468/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: Width and Max-Width
提问by Cameron
Why does:
为什么：
width: 98%;
max-width: 1140px;
do the same as
做同样的事
width: 1140px;
max-width: 98%;
The first one makes sense in that I'm saying the width is 98% but don't go larger than 1140px wide.
第一个是有道理的，因为我说宽度是 98% 但不要大于 1140px 宽。
The second one however would say the page is 1140px wide but then WOULD go as large as the page at 98% right? So e.g past 1140px... but apparently not, as it does the same as the first.
然而，第二个会说页面是 1140 像素宽，但会像页面一样大 98% 对吗？因此，例如超过 1140 像素...但显然不是，因为它与第一个相同。
Can someone explain why?
有人可以解释为什么吗？
回答by Anthony Sottile
From my understanding of the properties:
根据我对属性的理解：
if width > max-width use max-width
if max-width > width use width
Therefore, using your example, this must mean that 1140px is strictly less than 98% at the screen resolution you are viewing at.
因此，使用您的示例，这必须意味着在您查看的屏幕分辨率下，1140 像素严格小于 98%。
Shrink your browser screen and you will get different results.
缩小浏览器屏幕，您会得到不同的结果。
It's somewhat unrelated, but I've found max-width(and the corresponding property max-height) to be a problem with images in Internet Explorer, and found this to be helpful in coaxing it to use the correct values:
这有点无关，但我发现max-width（和相应的属性max-height）是 Internet Explorer 中图像的问题，并且发现这有助于诱使它使用正确的值：
img {
max-width: 150px;
max-height: 120px;
width: auto !important;
height: auto !important;
}
Without the last two properties, most standard-compliant browsers correctly maintain aspect ratio, but Internet Explorer will not unless you do that.
如果没有最后两个属性，大多数符合标准的浏览器会正确保持纵横比，但 Internet Explorer 不会，除非您这样做。
Edit:It looks like I've said basically the same answer as everyone else.
编辑：看起来我和其他人说的答案基本相同。
回答by Jason Gennaro
In your first example
在你的第一个例子中
width: 98%;
max-width: 1140px;
you are telling the browser to give a width of 98% of the screen, but not bigger than 1140px.
你告诉浏览器给屏幕的 98% 的宽度，但不大于 1140px。
In your second example,
在你的第二个例子中，
width: 1140px;
max-width: 98%;
you are telling the browser to give a width of 1140px but not larger than 98% of the browser.
您是在告诉浏览器宽度为 1140 像素但不大于浏览器的 98%。
But, in the second instance, your screen size would need to be smaller than 1140px for the max-width value to kick in.
但是，在第二种情况下，您的屏幕尺寸需要小于 1140px 才能使用 max-width 值。
Also notethat max-widthis buggy in many older versions of IE.
另请注意，这max-width在许多旧版本的 IE 中存在问题。
Read more here: http://reference.sitepoint.com/css/max-width
在此处阅读更多信息：http: //reference.sitepoint.com/css/max-width
回答by Kokos
If you set a fixed widthand a max-width, this means the following:
如果设置了 fixedwidth和 a max-width，则表示如下：
If the width goes above max-width, keep it at max-width.
If the width is below max-width, keep it on width.
如果宽度超过max-width，请保持在max-width。如果宽度低于max-width，请保持不变width。
It will never go over the max-width, that doesn't mean it can't stay under, the maxkeyword obviously indicates a limit and not a rule.
它永远不会超过max-width，这并不意味着它不能停留在，max关键字显然表示限制而不是规则。
回答by Aziz Shaikh
Assuming that the container is your browser window, if you are on a 1280 px screen resolution then 98% would be 1254 px, which is still greater than 1140 px. So you see no difference. Try moving to lower resolution such as 1024px
假设容器是您的浏览器窗口，如果您的屏幕分辨率为 1280 像素，那么 98% 将是 1254 像素，这仍然大于 1140 像素。所以你看不出区别。尝试移动到较低的分辨率，例如 1024px
回答by Jose Faeti
Probably in your first case 98% is equal or more than 1140px, so it will stick at 1140px.
可能在您的第一种情况下，98% 等于或大于 1140 像素，因此它将保持在 1140 像素。
In the second case of course, the width is 1140px, so it will stick to 1140px, and the max-width become useless.
当然第二种情况，宽度是1140px，所以会坚持1140px，max-width就没用了。
UpdateTry it here http://jsfiddle.net/
更新在这里尝试http://jsfiddle.net/
回答by Ahmed Eid
here is how I understand them .. they are 2 boxes -> width and max -width .
这是我对它们的理解……它们是 2 个盒子 -> width 和 max -width 。
width can't exceed max-width if so width has no effect . like wise if you defined max-width lower than width .. width has no effect .
如果宽度没有影响，则宽度不能超过最大宽度。同样明智的是，如果您定义的 max-width 低于 width .. width 没有效果。
at anytime your browser converts your % into most likely pixels yet the rules above still apply .
任何时候您的浏览器都会将您的 % 转换为最有可能的像素，但上述规则仍然适用。
examples :
例子 ：
width: 98%;
max-width: 1140px;
this is translated to :
这被翻译成：
width : 1960px;
max-width : 1140px;
this means -> only max width applies .
这意味着 -> 仅适用最大宽度。
width: 1140px;
max-width: 98%;
this is translated to :
这被翻译成：
width : 1140;
max-width : 1960px;
this means -> width is 1140 but can't exceed 1960 .
这意味着 -> 宽度是 1140 但不能超过 1960 。
回答by Question Overflow
The two options should essentially produce the sameresult, even with a width of less than 1140px, e.g. 500px:
这两个选项应该基本上产生相同的结果，即使宽度小于1140px，例如500px：
In the first case:
在第一种情况下：
width = min(98% * 500px, 1140px) = min(490px, 1140px) = 490px;
In the second case:
在第二种情况下：
width = min(1140px, 98% * 500px) = min(1140px, 490px) = 490px;
However, there is a problem with certain browsers, in particular firefox 12.0, if you use the second option within a fieldsetelement. See here. Drag the browser window and you will notice that the first inputelement which uses percentage max-widthdoesn't respond correctly.
但是，如果您在元素中使用第二个选项，则某些浏览器会出现问题，尤其是firefox 12.0fieldset。见这里。拖动浏览器窗口，您会注意到第一个input使用百分比的元素max-width没有正确响应。
As such, please use the first option:
因此，请使用第一个选项：
width: percentage;
max-width: pixels;
回答by Amol Udage
width - this css property used to set the width(fixed width), the width is fixed in this case.
width - 这个 css 属性用于设置宽度（固定宽度），在这种情况下宽度是固定的。
Example: .property-set{ width: 200px; }
示例：.property-set{ 宽度：200px; }
This set fixed width i.e 200px
此设置固定宽度即 200px
max-width - this css property is used to set width but in this width may be less than what the value is set, but max limit is the value that set by user.
max-width - 此 css 属性用于设置宽度，但此宽度可能小于设置的值，但最大限制是用户设置的值。
Example: .property-set{ max-width: 200px; }
示例：.property-set{ max-width: 200px; }
This set max width i.e 200px which means width may be less than 200px but not more than 200px
此设置最大宽度即 200px，这意味着宽度可能小于 200px 但不超过 200px
Thanks..
谢谢..
