最大寬度100px與寬度100px，爲什麼最大寬度短於寬度？

Question

我想知道這兩個的區別謝謝

最大寬度：如有需要100像素

body{ 
     max-width: 1080px; 
     width: 1080px; 
     background-color: floralwhite; 
     margin:0px; 
     padding: 0px; 
    } 

p{ 
     width:100px; /* and max-width of 100px; */ 
     padding: 20px; 
     margin:0px; 
     float:left; 
    } 

Answer 1

你可以認爲width財產爲比max-width屬性更加嚴格。

• 寬度說：「你應該是這個寬度和什麼也沒有別的。」
• 最大寬度說：「無論你想要的寬度，只是不超過這個寬度。」

您可以根據您提供的演示中看到這一點。 自然框的寬度大約是50px，不大於100px，因此max-width並不真正關心。但是，width看到這些框不是100px，因此將它們設置爲100px。

Answer 2

的max-width屬性只採用全width：100px的

寬度，具體取決於內容或padding。 width屬性將始終使用指定的金額（在您的案例中爲100px）。

See my example here.

你可以閱讀更多關於它的MDN：

max-width - 的最大寬度CSS屬性用來設置元素的最大寬度。它可以防止width屬性的使用值變得大於max-width指定的值。

width - 寬度屬性指定的元素的寬度。默認情況下，該屬性定義了內容區域的寬度。如果框尺寸設置爲邊框，則代替確定邊框區域的寬度。

Answer 3

的max-width屬性用於設置元素的最大寬度。

這防止width屬性的值變得大於max-width。

注意：max-width屬性的值覆蓋width。

所以，如果兩者在風格那麼如果width屬性小於max-width那麼width屬性將被應用，否則max-width屬性將被應用，而不是規定。

我想如果你指定max-width只有那麼width屬性將默認爲'auto'，但仍然會被限制在指定的max-width。