最大宽度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。