height、max-height、min-height 三方交战，为何最终高度却成了 min-height 的值？

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《height、max-height、min-height 三方交战，为何最终高度却成了 min-height 的值？》，聊聊，我们一起来看看吧！

height、max-height、min-height三方交战，各不相让

一个父元素拥有以下样式：

max-height: 100px;
height: 300px;
min-height: 200px;

然而，其最终高度却成了200px。这不禁令人疑惑，为何min-height生效了，父元素却没有自适应到子元素300px的高度？

背后的优先级之争

在height、max-height、min-height同时出现时，它们将按照以下优先级计算最终高度：

1. height与max-height比较，如果height大于max-height，max-height将成为新的height。
2. 上述计算得出的height与min-height比较，如果height小于min-height，min-height将成为最终的height。

按部就班的计算过程

在本例中，height为300px大于max-height为100px，因此height变为100px。

接着，100px的height与min-height为200px比较，发现height小于min-height，于是min-height成为最终的height，即200px。

总结

尽管min-height生效，但由于max-height的限制，父元素的高度无法超出200px。这是因为max-height和min-height同时生效时，优先级更高的max-height将对height施加上限。

好了，本文到此结束，带大家了解了《height、max-height、min-height 三方交战，为何最终高度却成了 min-height 的值？》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！