三个高度属性的基本定义
在CSS中，height、max-height和min-height都是用来控制元素高度尺寸的属性，三者的基础定义如下：
- height：用来设置元素内容区域的高度，默认值为auto，即由内容自动撑开高度。
- max-height：用来设置元素允许的最大高度，元素高度不会超过这个值。
- min-height：用来设置元素允许的最小高度，元素高度不会小于这个值。
生效顺序规则
当三个属性同时作用于同一个HTML元素时，生效顺序遵循固定的优先级逻辑，核心规则可以总结为：min-height优先级最高，max-height次之，height优先级最低，具体判断流程如下：
第一步：先判断min-height是否生效
首先会检查元素计算后的height值是否小于min-height设置的值，如果小于，那么元素最终高度会直接取min-height的值，此时height和max-height的设置都不会生效。
第二步：再判断max-height是否生效
如果第一步中height的值大于等于min-height，那么会继续判断height的值是否大于max-height设置的值，如果大于，元素最终高度会取max-height的值，此时height的设置不生效。
第三步：最后应用height的值
如果height的值既大于等于min-height，又小于等于max-height，那么元素最终高度就取height设置的值。
代码示例验证
下面通过几个具体的代码示例来验证上述规则，所有示例的元素基础样式如下：
/* 基础公共样式 */
.box {
width: 200px;
background-color: #f0f0f0;
border: 1px solid #ccc;
margin-bottom: 20px;
}
场景1：height小于min-height
此时min-height优先级最高，最终高度取min-height的值：
<div class="box" style="height: 50px; min-height: 100px; max-height: 200px;">
内容区域
</div>
/* 最终元素高度为100px，忽略height的50px设置 */
场景2：height大于max-height
此时max-height生效，最终高度取max-height的值：
<div class="box" style="height: 300px; min-height: 100px; max-height: 200px;">
内容区域
</div>
/* 最终元素高度为200px，忽略height的300px设置 */
场景3：height在min-height和max-height之间
此时height正常生效：
<div class="box" style="height: 150px; min-height: 100px; max-height: 200px;">
内容区域
</div>
/* 最终元素高度为150px，三个属性都符合规则 */
场景4：height为auto的情况
当height设置为auto时，元素高度由内容决定，此时仍然先判断内容高度是否小于min-height，再判断是否大于max-height：
<div class="box" style="height: auto; min-height: 100px; max-height: 200px;">
少量内容
</div>
<div class="box" style="height: auto; min-height: 100px; max-height: 200px;">
大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容大量内容
</div>
/* 第一个盒子内容高度不足100px，最终高度为100px */ /* 第二个盒子内容高度超过200px，最终高度为200px，超出部分溢出 */
常见使用误区
很多开发者会误以为三个属性的生效顺序和书写顺序有关，实际上CSS属性的生效优先级只和属性本身的规则有关，和书写顺序没有任何关系。比如下面两种写法的效果完全一致：
/* 写法1 */
.box1 {
height: 150px;
min-height: 100px;
max-height: 200px;
}
/* 写法2 */
.box2 {
max-height: 200px;
min-height: 100px;
height: 150px;
}
另外需要注意，min-height和max-height的设置值如果冲突，比如min-height大于max-height，那么min-height会生效，max-height会被忽略，因为min-height的优先级更高。
实际开发应用建议
在实际布局中，我们可以灵活组合这三个属性来满足需求：
- 如果需要元素高度固定，同时不允许小于某个值，可以设置height和min-height，比如侧边栏高度设置height: 100vh; min-height: 500px;，保证小屏幕下也有足够高度。
- 如果需要元素高度自适应内容，同时限制最大和最小高度，可以设置height: auto; min-height和max-height，比如卡片组件的高度限制。
- 避免同时设置互相冲突的min-height和max-height，否则max-height的设置会无效。
heightmax-heightmin-heightCSS盒模型修改时间：2026-07-20 02:42:15