CSS中min-height、min-width、max-width、max-height的理解及优先级问题

min-height、min-width、max-width、max-height的理解中的重点

在学习css的min-height、min-width、max-width、max-height这四个属性时，又遇到了一些问题和疑惑。参考了以下三个博客后把它们搞清楚了。
如何理解CSS的min-height、min-width、max-width、max-height
【css】max-height，min-height，height一起使用时，优先级问题
min-height和min-width的用法总结

一、min-width不生效的问题

<div class="test">我是一只小青蛙我是一只小青蛙我是一只小青蛙</div>

   .test{
       min-width: 100px;
       height: 60px;
       background-color: #E5B783;
   }

结果如图：

会发现min-width并没有生效。
问题原因是：
min-width会继承父元素的width，而min-height不会。
如果无父元素，也就是最外层是body，则默认100%。 ——摘自xi-2130博客

解决方法：浮动，定位，使之脱离文档流
(1) position: absolute：

  .test{
        min-width: 100px;
        height: 60px;
        background-color: #E5B783;
        position: absolute;
        top: 0;
        left: 0;
    }

(2) position: fixed：

  .test{
        min-width: 100px;
        height: 60px;
        background-color: #E5B783;
        position: fixed;
        top: 0;
        left: 0;
    }

(3) float进行元素浮动：

    .test{
        min-width: 100px;
        height: 60px;
        background-color: #E5B783;
        float: left;
    }

二、同时使用时的优先级问题

MDN说法：
max-height 这个属性会阻止 height 属性的设置值变得比 max-height 更大。
max-height 属性用来设置给定元素的最大高度. 如果height 属性设置的高度比该属性设置的高度还大,则height 属性会失效.
max-height 重载（覆盖掉） height, 但是 min-height 又会重载（覆盖掉） max-height.

实际效果：
当 height 和 max-height一起使用时，谁小听谁的
　　max-height < height 元素高度： max-height
　 　height < max-height 元素高度： height

当 height，max-height，min-height一起使用时
　　height > max-height > min-height 元素高度：max-height
　　height > min-height > max-height 元素高度：min-height（虽然这里的height没有小于min-height，但是它大于了max-height，因此导致height失效；而max-height又小于min-height，导致max-height失效，因此最后对元素高度起作用的就只是min-height）
　　min-height > height > max-height 元素高度：min-height