max-width為100px與width為100px，為什么max-width小於width？

Question

我想了解兩者的區別，謝謝

最大寬度：100px

寬度：100px

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

如果需要， max-width屬性僅使用整個width ，具體取決於內容或padding 。 width屬性將始終使用指定的數量（在您的情況下為100px ）。

在這里查看我的示例。

您可以在MDN上閱讀有關此內容的更多信息：

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

width - width屬性指定元素的寬度。 默認情況下，該屬性定義內容區域的寬度。 如果box-sizing設置為border-box，則它將確定邊框區域的寬度。

Answer 2

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

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

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

因此，如果在樣式中都指定了兩者，則如果width屬性小於max-width那么將應用width屬性，否則將應用max-width屬性。

我認為，如果僅指定max-width則width屬性將默認為'auto'，但仍將限制為指定的max-width 。

Answer 3

您可以認為width屬性比max-width屬性更為嚴格。

• 寬度說：“您應該是這個寬度， 沒有別的。”
• 最大寬度說：“只要您想要的寬度，都不要大於此寬度。”

您可以通過提供的演示看到這一點。 盒子的自然寬度大約為50px，不大於100px，因此max-width並不在乎。 但是， width看到這些框不是100px，因此將其設置為100px。