CSS中搭配min-width使用时，width与max-width的使用区别是什么？

结论 #

当width、min-width、max-width设为相同固定值时，大多数常规场景下width + min-width和min-width + max-width的表现完全一致，都能实现固定宽度：既不会被同级元素挤压变小，也不会自动撑满父容器宽度。但两者的底层逻辑和部分特殊场景下存在明显差异。

核心差异 #

1. 宽度计算优先级逻辑不同 #

CSS 中元素宽度的计算优先级规则为：min-width > max-width > width，两种组合的生效逻辑完全不同：

• width: 80px + min-width: 80px：min-width 限制了元素的最小宽度为80px，优先级高于width，保证元素不会被挤压到80px以下，但没有限制最大宽度，元素可以被外部规则（比如flex布局的flex-grow）撑大到超过80px
• min-width: 80px + max-width: 80px：min-width限制最小宽度，max-width限制最大宽度，直接把元素宽度的上下限完全锁死在80px，无论其他规则如何调整，宽度都不会变化

2. 特殊布局场景下的表现差异 #

最典型的就是 flex/grid 布局的弹性拉伸场景：
给目标元素添加flex-grow: 1属性后：

• width + min-width 组合的元素会拉伸占满父容器的剩余空间，宽度超过80px
• min-width + max-width 组合的元素宽度仍保持80px，不会被拉伸

另外如果后续需要调整宽度规则，两种组合的修改成本也不同：

• 要把固定宽度改成「最少80px，最多自适应父容器」，只需要删除width + min-width组合里的width即可
• 要改成「最少80px，最多200px」，只需要修改min-width + max-width组合里的max-width即可

关于你提供的示例 #

你给出的代码中两种组合表现一致，是因为没有设置拉伸相关的属性（比如flex-grow），两种组合的宽度上下限都被限制在了80px，所以看不出差异。

内容的提问来源于stack exchange，提问作者mpen