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

你是否曾经想过限制模态(modal)的宽度(width)？比如模态需要在大屏幕上显示时，将宽度限制在600px。但是，你肯定不想它撑破父类元素。例如，避免在移动屏幕中出现水泡的滚动条。

那么应该怎么做呢？

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

结论是：这真没多大差异，两者皆可。

一些开发人员会有的反应：

＊ 第二个可能“更正确”
＊ 它们之间有很大的差别
＊ 第二个对父类元素较窄时更友好
＊ 第一个就是垃圾
＊ 第二个行为更符合逻辑

我同意这有点思想扭曲，它们看起来确实不同。那我们就做一个测试：

src="http://sandbox.runjs.cn/show/pbxfx9ke" allowfullscreen="allowfullscreen">

这样可能是一个更好的思考方式：如果元素呈现的宽度比max-width标明的宽度更宽时，则使用max-width标明的宽度。

情景：

＊ 父类是1000px宽(width)

        ＊ 当元素宽度设定为600px时，这并没有破坏`max-width`的规则，所以也是600px。
        ＊ 当元素宽度设定为1000px时，这就打破了`max-width`的规则，所以强制限制元素宽度为600px

＊ 父类是320px宽(width)

        ＊ 当元素宽度设定为600px时，这打破了`max-width`的规则，因为最大宽度只能是320px，所以只能是320px
        ＊ 当元素宽度设定为320px宽时，这并没有打破最`max-width`规则，所以是320px

所以无论父元素是宽或者窄，这些不同规则结果都是一样的。

---

转载自: ZhangCC博客－关于width和max-width的故事