爲什麼最大寬度覆蓋最小寬度？

我試圖創建一個響應式佈局，如果屏幕大小允許，兩個框相鄰放置，並且如果它們沒有，則將它們放在對方下面。如果這些盒子在彼此之下，我希望它們被集中到他們的父母身上。我已經建立了一個的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

爲什麼最大寬度覆蓋最小寬度？

回答

相關問題