`width` 和 `max-width` 的故事

上周，我们在其中一篇文章的评论线程中进行了一次有趣的讨论，模态框样式的注意事项。

您可能希望限制模态框的宽度，对吧？ 在较大的屏幕上，这会让它看起来更像一个“模态框”。假设 600px 正好合适。但是，您需要确保它不会超出其父元素的范围。例如，避免在移动屏幕上出现水平滚动。

您将如何做到这一点？

1. width: 600px; max-width: 100%;
2. width: 100%; max-width: 600px;

答案是：实际上没什么区别，它们的效果相同。

一些人的 反应

• 第二种方式“更正确”
• 实际上差异很大
• 第二个在较窄的父级宽度下会更友好
• 第一个是垃圾
• 第二个以更合乎逻辑的方式描述了行为

我同意这有点令人费解。它们看起来应该有所不同。 一个简化的测试用例 始终是一个好主意。

您可以这样考虑：**如果元素的渲染宽度超过了 `max-width` 指定的宽度，则 `max-width` 会生效。**

场景

• 父元素宽度为 1000px
  • Width 指示元素宽度应为 600px。这没有违反 max-width 规则，因此宽度为 **600px**！
  • Width 指示元素宽度应为 1000px。这违反了 max-width 规则，因此强制元素宽度降至 **600px**。
• 父元素宽度为 320px
  • Width 指示元素宽度应为 600px。这违反了 max-width 规则，该规则规定元素宽度最多只能为 320px，因此宽度为 **320px**！
  • Width 指示元素宽度应为 320px。这没有违反 max-width 规则，因此宽度为 **320px**！

无论父元素是更宽还是更窄，这些不同的规则集最终都会相互一致。（尽管当它们是弹性项目时存在差异。）