組み合わせる幅および最大幅は

Question

私はこの持って言う：これで遊んでから

.box { 
 
    width: 600px; 
 
    height: 300px; 
 
    background: green; 
 
    max-width: 80%; 
 
}

<div class="box"></div>

を、それは限り親コンテナの80％を占有します箱のように見えます600ピクセルを超えて拡大することはありません。親がさらに伸びると、ボックスは幅が固定されたままになり、ページの80％を占めることはありません。右？

Answer 1

.box { 
    width: 600px; 
    height: 300px; 
    background: green; 
    max-width: 80%; 
    } 

それを打破するのをしてみましょう：

テボックスのwidthが600PXでデフォルト設定され、これはdiv要素は、常にあなたのmax-widthプロパティは、しかし幅を制限600PX

の幅を持っていることを意味しますあなたの親要素の合計スペースが小さい場合、750px（750の80％は600なので）。つまり、要素の最大幅は常にその親の80％になります。

例：幅600PXですので、とき幅が600PXときに幅が600PX

500pxなど親が十分なスペースを持っていないことになるので、

800ピクセル親は十分なスペースが、残っているが、左親の80％に戻ります、そして、あなたのdivがあなたの質問については400ピクセル

次のようになります。

親がさらに広がったら、箱の幅が固定されたままになり、ページの80％を占めるわけではありません。右？

これは正しいです。

Answer 2

'ボックス'は、幅が600ピクセル以下の場合にのみ '最大幅'プロパティを使用します。

上記の内容は600pxの幅を維持します。