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。
以上就是CSS布局中，height、max-height和min-height的优先级和作用顺序如何？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1559353.html
微信扫一扫 
支付宝扫一扫 
