CSS中width，min-width和max-width之间的联系

字面意思来看，width，min-width和max-width分别代表的是元素的宽度，最小宽度和最大宽度，那么他们之间有什么联系呢？

<div class="container">
</div>
<style>
.container {
    background-color: red;
    height: 100px;
     100px
}
</style>

此时width为100px,显示结果如下图：

100px

.container { 
background-color: red; 
height: 100px; 
 100px; 
max- 50px 
} 

此时显示max-50px,如下图所示：

50px

.container { 
background-color: red; 
height: 100px; 
 100px; 
max- 150px 
} 

此时显示width：100px,如下图所示： 

100px

只设width和max-width时，谁值小显示谁。

.container {
            background-color: red;
            height: 100px;
             100px;
            min-120px;
        }

此时显示min-120px如图：

120px

  .container {
            background-color: red;
            height: 100px;
             100px;
            min-20px;
        }

此时显示width：100px;如图：

100px

只设width和min-width谁大显示谁。

.container { 
background-color: red; 
height: 100px; 
 100px; 
max- 50px; 
min- 20px 
} 

此时显示50px,如下图所示： 

50px

 .container { 
        background-color: red; 
height: 100px; 
 100px; 
max- 20px; 
min- 50px 
} 

此时显示50px,如图：

50px

 当 min-width和max-width小于width时，显示min和max中大的那个值。

.container { 
background-color: red; 
height: 100px; 
 100px; 
max- 150px; 
min- 120px 
} 

此时显示min-width：120px；如图所示：

120px

  .container { 
        background-color: red; 
height: 100px; 
 100px; 
max- 120px; 
min- 150px 
} 

150px

当min-width和max-wdith大于width时，显示min值。

.container { 
background-color: red; 
height: 100px; 
 100px; 
max- 150px; 
min- 20px 
} 

此时显示100px,如图：

100px

.container { 
background-color: red; 
height: 100px; 
 100px; 
max- 50px; 
min- 120px 
} 

此时显示120px,如图：

 120px

 width和min谁大显示谁