<div class="container">
</div>
<style>
.container {
background-color: red;
height: 100px;
width: 100px
}
</style>
当我们只设置width时,如100px,显示结果如下图:
.container {
background-color: red;
height: 100px;
width: 100px;
max-width: 50px
}
这时如果我们同时设置了max-width:50px,则max-width的值会覆盖width的值,container显示为50px,如下图所示:
.container {
background-color: red;
height: 100px;
width: 100px;
max-width: 150px
}
但是如果我们设置max-width:150px,那么width的值会覆盖max-width的值,container显示为100px,如下图所示:
.container {
background-color: red;
height: 100px;
width: 100px;
max-width: 50px;
min-width: 120px
}
再设置min-width:120px,则min-width的值会覆盖width的值,container显示为120px,如下图所示:
优先级:min-width>width和max-width
当三个属性都设置时,相当于取Math.max(min-width, Math.min(width, max-width))