max-height、min-height、height优先级的问题

前言

我们在实际开发中可能会限制元素的最大高度，那么我们使用的属性必定是max-height，那么不知道大家有没有考虑过如果同时设置max-height和height会发生什么呢？

max-height和height优先级

max-height这个属性会限制height属性的值设置比max-height更大

max-height属性用来设置给定元素的最大高度. 如果height属性设置的高度比该属性设置的高度还大,则height属性会失效.max-height 重载（覆盖掉）height

参考：MDN

min-height和height优先级

min-height这个属性会限制height属性的值设置比min-height更小

min-height属性用来设置给定元素的最小高度. 如果height属性设置的高度比该属性设置的高度还小,则height属性会失效.min-height 重载（覆盖掉）height

min-height和max-height优先级

min-height属性设置的高度比max-height还大，则max-height属性会失效，min-height 重载（覆盖掉）max-height

参考：MDN

总结

max-height < height  => max-height 重载 height

min-height > height => min-height 重载 height

min-height > max-height => min-height 重载 max-height