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到最大宽度，具体取决于其内容。

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为宽度指定下限。因此，元素的宽度将从最小宽度变为......（它将取决于其他样式）。

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>

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

1 个答案: