最大宽度为100px，宽度为100px，为什么最大宽度比宽度短？

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）。

See my example here.

您可以在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属性将默认为＆＃39; auto＆＃39; ，但仍将限制为指定的max-width。

Answer 3

您可以将width属性视为比max-width属性更严格。

• 宽度说：“你应该是这个宽度而没有其他。”
• 最大宽度说：“无论你想要什么宽度，都不要超过这个宽度。”

您可以通过您提供的演示看到这一点。盒子的自然宽度大约为50px，不大于100px，因此max-width并不真正关心。但是，width看到这些框不是100px，因此将它们设置为100px。