字面意思来看,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谁大显示谁