大家好，欢迎来到IT知识分享网。
width和max-width和min-width的区别
一、总结
一句话总结：
心性还是需要磨砺一下，增加一点禅性，少一点计较
二、CSS中width，min-width和max-width之间的联系_卡卡的笔录-CSDN博客
转自或参考：CSS中width，min-width和max-width之间的联系_卡卡的笔录-CSDN博客
https://blog.csdn.net/m0_38102188/article/details/80612233
字面意思来看，width，min-width和max-width分别代表的是元素的宽度，最小宽度和最大宽度，那么他们之间有什么联系呢？
<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,如下图所示：
即width和max-width谁的值小，那么就显示为谁的宽度
.container {
background-color: red;
height: 100px;
width: 100px;
max-width: 50px;
min-width: 20px
}
这时再设置min-width:20px, width的值依然会覆盖min-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))，
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/33671.html
