結合寬度和最大寬度

Question

說我有這樣的：

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

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

從這個玩弄，它看起來像箱子，只要將佔用父容器的80％它不會擴展到600px以上。一旦父母進一步延伸，該盒子的寬度將保持不變，並且不佔80％的頁面。對？

Answer 1

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

讓我們來分析一下：

特箱的width在600px的是違約，這意味着DIV總是會有600px的

但是你max-width屬性限制寬度的寬度，如果父元素的總空間變小，那麼750px（因爲750的80％是600）。這意味着元素的最大寬度將始終爲其父元素的80％。

實施例：

一個800像素父具有當寬度爲600像素，所以寬度將600px的

一個500px的父進程將不會有足夠的空間留當寬度爲600像素，因此它有足夠的空間留將恢復到父的80％，你的DIV將400像素

至於你的問題：

一旦母公司進一步伸展，該框將保持固定的寬度和不佔80％的網頁。對？

這是正確的。

Answer 2

正確時，'box'只有在它的寬度小於600px的情況下才會使用'max-width'屬性。

任何上面的內容，它將保持其600px的寬度。