为什么最大宽度覆盖最小宽度？

我试图创建一个响应式布局，如果屏幕大小允许，两个框相邻放置，并且如果它们没有，则将它们放在对方下面。如果这些盒子在彼此之下，我希望它们被集中到他们的父母身上。我已经建立了一个的jsfiddle来演示该问题：为什么最大宽度覆盖最小宽度？

width: 50%; 
min-width: 350px; 
max-width: 100%;

尝试调整“结果”窗格下方350像素。这些元素将与其父项重叠。

我的问题：

为什么没有指定的最大宽度荣幸，尽管它涉及的最小宽度后？

我当然可以使用媒体查询，但我想知道为什么发生这种情况。

来源

2013-04-17 Lg102

我没有看到问题。如果我把它扩大，它们会达到50％，如果我使它小于700px，那么它们保持在50％，然后它们保持350px的最小宽度并且被包裹（第二个到新的一行）。你期望发生什么？ –

红色方框与父元素重叠，如果它小于350px。 – Lg102

@FranciscoZarabozo - 当父母的大小小于子元素的最小宽度的总和时，Lg102似乎期望最大宽度为100％。一种可能的咨询最小宽度 – CodeMonkey

由于CSS standards的：

下面的算法描述了两个属性如何影响“width”属性的使用值：

暂定使用宽度被计算（不'min-width'和 'max-width'）遵循上面“计算宽度和页边距”下的规则。

如果临时使用的宽度大于 'max-width'，则再次应用上述规则，但这次使用 'max-width'的计算值作为'width'的计算值。

如果生成的宽度小于“最小宽度”，则再次应用上面的以上的规则，但是这次使用“最小宽度”的值作为 “宽度”的计算值。

因为这样的最小宽度总是'胜利'。无论如何，在特定的CSS规则中没有优先级，所有值都是以原子方式应用的。只有当不同的规则全部适用于相同的元素时才会出现优先级，即使在考虑文件顺序之前它首先基于特异性。

来源

2013-04-17 15:15:41

仅当*相同的规则*适用于元素多次时才会出现优先级。即'.foo {bar：fizz;酒吧：嗡嗡声; }'后面的定义优先。在这个例子中，'min-width'和'max-width'是不同的规则，所以优先级不会被纳入。 – zzzzBov

这不是真正的优先。当一个*声明*在一个*规则*中重复时，它只是覆盖了由顺序解析产生的相同值。由此产生的规则（规则是一个选择器和一组声明）可以基于选择器的特殊性而具有优先权，或者如果2条规则同样具体，则CSS的“级联”效应起作用并且后一个定义被考虑更具体。 –

我的观点是，你的文章说“只有当不同的规则都适用于同一个元素时才会出现优先级”，当它应该是“优先级只发生在同一个元素应用相同的样式规则时” – zzzzBov

为什么最大宽度覆盖最小宽度？

回答

相关问题