height、max-height、min-height三者博弈
在CSS布局中，height、max-height和min-height属性经常共同使用，但在实际应用中，它们的作用顺序和优先级可能会引起困惑。
问题解析
给定以下HTML代码：
父元素的最终高度为200px，令人好奇的是min-height是否生效了，以及如果生效了，为什么父元素的最终高度与子元素不同。
立即学习“前端免费学习笔记（深入）”；
答案
CSS属性的计算顺序遵循以下逻辑：
- height先与max-height比较，若height大于max-height，则height计算值为max-height的值。
- 上述结果再与min-height比较，若小于min-height，则height计算值为min-height的值。
在给定的示例中：
- height为300px，大于max-height为100px。
- 因此，height计算值变为max-height的值，即100px。
- 最后，100px与min-height为200px比较，发现小于200px。
- 因此，height最终计算值为200px。
由此可见，min-height在该示例中确实生效了，但由于max-height优先级较高，其限制了height的最大值，使得父元素的高度最终为200px，而非子元素的300px。
