CSS:宽度和最大宽度

Question

为什么:

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

做同样的事

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

第一个是有意义的,因为我说宽度是98%,但不要大于1140px宽.

然而,第二个会说这个页面的宽度是1140像素,但是那么页面的大小会达到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

如果设置了 fixedwidth和 a max-width，则表示如下：

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

它永远不会超过max-width，这并不意味着它不能停留在，max关键字显然表示限制而不是规则。

Answer 3

假设容器是您的浏览器窗口，如果您的屏幕分辨率为 1280 px，则 98% 将为 1254 px，这仍然大于 1140 px。所以你看不出有什么区别。尝试降低分辨率，例如 1024px