MDN说法：
max-height 这个属性会阻止 height 属性的设置值变得比 max-height 更大。
max-height 属性用来设置给定元素的最大高度. 如果height 属性设置的高度比该属性设置的高度还大,则height 属性会失效.
max-height 重载（覆盖掉） height, 但是 min-height 又会重载（覆盖掉） max-height.
实际效果：
当 height 和 max-height一起使用时，谁小听谁的
max-height < height 元素高度： max-height
height < max-height 元素高度： height
当 height,max-height,min-height一起使用时
height > max-height > min-height 元素高度：max-height
height > min-height > manx-height 元素高度：min-height
min-height > height > max-height 元素高度：min-height
范例：
html
<html lang="en"> <head> <meta charset="UTF-8"> <title>max-height、 min-height、 height 一起使用</title> <style> ul{ list-style:none; padding:0; } .clearfix{ clear:both; content:''; display: block; } .clearfix:after{ content:''; clear:both; display:block; } .clearfix{ zoom:1; } .fl { float:left; display:inline; } .fr { float:right; } .wrap{ width:200px; margin-left:20px; } .box{ height:500px; background-color:#e64c65; } .box2{ height:500px; max-height:300px; background-color:rgb(169, 173, 233); } .box3{ height:500px; max-height:600px; background-color:rgb(199, 69, 166); } .box4{ height:500px; max-height:300px; min-height:200px; background-color:#ccc; } .box5{ height:500px; max-height:300px; min-height:400px; background-color:#ccc; } .box6{ height:500px; max-height:300px; min-height:600px; background-color:#ccc; } </style> </head> <body> <div class="clearfix"> <div class="box wrap fl"> <ul> <li>原：200</li> <li>原：height:500</li> <li>实：100</li> <li>实：height:500</li> </ul> </div> <div class="box2 wrap fl"> <ul> <li>原：200</li> <li>原：height:500</li> <li>原：max-height:300</li> <li>实：100</li> <li>实：height:300</li> </ul> </div> <div class="box3 wrap fl"> <ul> <li>原：200</li> <li>原：height:500</li> <li>原：max-height:600</li> <li>实：100</li> <li>实：height:500</li> </ul> </div> <div class="box4 wrap fl"> <ul> <li>原：200</li> <li>原：height:500</li> <li>原：max-height:300</li> <li>原：min-height:200</li> <li>实：100</li> <li>实：300</li> </ul> </div> <div class="box5 wrap fl"> <ul> <li>原：200</li> <li>原：height:500</li> <li>原：max-height:300</li> <li>原：min-height:400</li> <li>实：100</li> <li>实：400</li> </ul> </div> <div class="box6 wrap fl"> <ul> <li>原：200</li> <li>原：height:500</li> <li>原：max-height:300</li> <li>原：min-height:600</li> <li>实：100</li> <li>实：600</li> </ul> </div> </div> </body> </html>
效果：
参考链接：https://developer.mozilla.org/zh-CN/docs/CSS/max-height
作者：smile.轉角
QQ：493177502