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

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

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

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

100px

 

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

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

50px

 

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

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

100px

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

 

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

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

120px

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

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

100px

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

 

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

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

50px

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

此时显示50px,如图：

50px

 

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

 

 

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

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

120px

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

150px

 

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

 

 

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

此时显示width:100px,如图：

100px

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

此时显示120px,如图：

 120px

 

 width和min谁大显示谁