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

https://blog.csdn.net/m0_38102188/article/details/80612233

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

1 2 3 4 5 6 7 8 9 当我们只设置width时，如100px,显示结果如下图： 100px .container { background-color: red; height: 100px; 100px; max- 50px } 这时如果我们同时设置了max-50px，则max-width的值会覆盖width的值，container显示为50px,如下图所示： max-50px .container { background-color: red; height: 100px; 100px; max- 150px } 但是如果我们设置max-150px,那么width的值会覆盖max-width的值，container显示为100px,如下图所示： max-150px

即width和max-width谁的值小，那么就显示为谁的宽度
.container {
background-color: red;
height: 100px;
100px;
max- 50px;
min- 20px
}
这时再设置min-20px, width的值依然会覆盖min-width的值，container显示为100px,如下图所示：
min-20px
.container {
background-color: red;
height: 100px;
100px;
max- 50px;
min- 120px
}
再设置min-120px,则min-width的值会覆盖width的值，container显示为120px,如下图所示：
这里写图片描述
总结来看：当三个属性都设置时，相当于取Math.max(min-width, Math.min(width, max-width))，