max-width

https://developer.mozilla.org/zh-CN/docs/Web/CSS/max-width

max-width 属性用来给元素设置最大宽度值。定义了max-width的元素会在达到max-width 值之后避免进一步按照width属性设置变大.
max-width会覆盖width 设置，但 min-width 设置会覆盖 max-width
(覆盖width的值的前提是本身的width在max-width宽度之中)

  1. <div class="box">
  2.     box
  3. </div>
  5. <style>
  6.     .box{
  7.         border: 1px solid black;
  8.         width: 100%;
  9.         height: 200px;
  10.         max-width: 600px;
  11.     }
  12. </style>

width

https://developer.mozilla.org/zh-CN/docs/Web/CSS/width

width 属性用于设置元素的宽度。width 默认设置内容区域的宽度，（内容区域即不包含边框border）.但如果 box-sizing 属性被设置为 border-box就转而设置边框区域的宽度
min-width 和 max-width 属性的优先级高于 width

示例：其中 width:min-content; 会以最长的字母为标准

  1. <p class="minblue">The Mozilla community produces a lot of great software.</p>
  3. p.minblue {
  4.   background: lightblue;
  5.   width: -moz-min-content;    /* Firefox */
  6.   width: -webkit-min-content; /* Chrome */
  7. }

总结

width与max-width时，哪个小就使用哪个

相关链接
https://stackoverflow.com/questions/6456468/css-width-and-max-width