最小宽度和最大宽度具有相同的值? [英] min-width and max-width with the same value?

问题描述

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

In the past, I saw the next css and I was thinking if there is some actual difference between

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

和

width: 90px;

推荐答案

使用width只会在元素上指定固定宽度，而无需注意其内容(因此您可能会产生溢出):

using width will simply specify fixed width over the element without paying attention to its content (so you can have overflow) :

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

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

使用max-width表示元素的宽度将具有上限.因此，根据其内容，其宽度可以从0到最大宽度.

Using max-width means that the element will have an upper bound for its width. So its width can be from 0 to max-width depending on its content.

div {
  max-width: 300px;
  border: 2px solid red;
}

.diff {
  display: inline-block;
}

<div>
  <!-- this i a 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到...(取决于其他样式)变化.

And min-width specify lower bound for width. So the width of the element will vary from min-width to ... (it will depend on other style).

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相同.

So if you specify min-width and max-width, you will set up a lower and upper bound and if both are equal it will be the same as simply specifing a 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一样，Flexbox中的收缩功能允许元素

In some particular cases, width will not give the same result as min-width/max-width like with Flexbox where we have the shrink feature that allow an element to shrink to fit its container

.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会阻止这种情况.

As you can see in the second case the element will not shrink because, unlike width, min-width will prevent this.

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

Another case is the use of resize property:

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

As you can see, we can resize the element defined by width and not the one defined by min-width/max-width

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

We should also note that min-width/max-width is more powerful than width. Setting the 3 properties to different values will make min-width the winner

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

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

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

This means that we can override a value set by width using min-width/max-width but not the opposite

这篇关于最小宽度和最大宽度具有相同的值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！