min-width 和 max-width 具有相同的值？

Question

过去，我看到了下一个 css，我在想两者之间是否存在一些实际差异

min-width: 90px;
max-width: 90px;

和

width: 90px;

Answer 1

使用width将简单地在元素上指定固定宽度而不注意其内容（因此您可能会溢出）：

 div { width: 80px; border:2px solid red; }

 <div> <img src="https://lorempixel.com/200/100/" /> </div>

使用max-width意味着元素将有一个宽度的上限。 所以它的宽度可以从 0 到 max-width 取决于它的内容。

 div { max-width: 300px; border: 2px solid red; } .diff { display: inline-block; }

 <div> <!-- this ia block element so max-width prevent it from taking 100% width --> <img src="https://lorempixel.com/200/100/" /> </div> <div class="diff"> <!-- this i an inline-block element so max-width has no effect in this case cause the content is taking less than 300px --> <img src="https://lorempixel.com/200/100/" /> </div> <div> <!-- You have overflow because the element cannot have more than 300 of width --> <img src="https://lorempixel.com/400/100/" /> </div>

min-width指定min-width下限。 所以元素的宽度会从 min-width 变化到 ...（这将取决于其他样式）。

 div { min-width: 300px; border: 2px solid red; } .diff { display: inline-block; min-height:50px; }

 <div> <img src="https://lorempixel.com/200/100/" /> </div> <div class="diff"> </div> <div class="diff"> <img src="https://lorempixel.com/200/100/" /> </div> <div> <img src="https://lorempixel.com/400/100/" /> </div>

---

因此，如果您指定min-width和max-width ，您将设置下限和上限，如果两者相等，则与简单地指定width相同。

 div { min-width: 300px; max-width: 300px; border: 2px solid red; } .diff { display: inline-block; min-height:50px; }

 <div> <img src="https://lorempixel.com/200/100/" /> </div> <div class="diff"> </div> <div class="diff"> <img src="https://lorempixel.com/200/100/" /> </div> <div> <img src="https://lorempixel.com/400/100/" /> </div>

特殊情况

在某些特定情况下， width不会给出与min-width / max-width相同的结果，就像在 Flexbox 中我们有收缩功能，允许元素收缩以适应其容器

 .box { width:200px; border:1px solid red; display:flex; margin:5px; } .box > div { border:2px solid; height:50px; }

 <div class="box"> <div style="width:300px"></div> </div> <div class="box"> <div style="min-width:300px;max-width:300px;"></div> </div>

正如您在第二种情况下所看到的，元素不会缩小，因为与width不同， min-width会阻止这种情况。

另一种情况是使用resize属性：

 div { border: 2px solid; height: 50px; overflow: auto; resize: both; }

 <div style="width:300px"></div> <div style="min-width:300px;max-width:300px;"></div>

如您所见，我们可以调整由width定义的元素而不是由min-width / max-width定义的元素的大小

---

我们还应该注意到min-width / max-width比width更强大。 将 3 个属性设置为不同的值将使min-width成为赢家

 .box { border: 2px solid; height: 50px; width:100px; min-width:200px; max-width:150px; }

 <div class="box"></div>

这意味着我们可以使用min-width / max-width覆盖由width设置的值，但不能相反