奔跑的蚂蚁

以下max-width及width使用方式区别:

.modal-one {
    ...
    width: 800px;
    max-width: 100%;
}

or

.modal-two {
    ...
    width: 100%;
    max-width: 800px;
}

Scenario 1: parent is wider than 800px

parent is 1000px wide

1. .modal-one 显示width为800px, max-width为1000px, width未超过max-width, 则width最终为800px
2. .modal-two 显示width为1000px, max-width为800px, width超过了max-width, 则width最终为800px

Scenario 2: parent is smaller than 800px

parent is 460px wide

1. .modal-one 显示width为800px, max-width为460px, width超过max-width, 则width最终为460px
2. .modal-two 显示width为460px, max-width为800px, width未超过max-width, 则width最终为460px

因此, 一个元素如果width大于max-width, max-width是高于width的。