对min/max-width/height的认识

在css世界中，提出了min/max-weight的应用场景：自适应布局或者是流式布局中才会出现，从最小和最大上面我们知道他们是具有边界行为的属性。

在现在的pc端开发中，为了适应各种不同分辨率的显示屏，min/max-width就会起到很关键的作用。

---

应用场景

下面列举一个自己遇到的小情况（电脑分辨率为1920*1080），正常情况如下：

当我们不设置min-weight的时候

乍眼一看，没什么变化，但是这也是理所当然的，最小宽度这个边界值还没有触发，当我们缩小屏幕的时候，就会出现下面的这种情况：

此时的页面布局就会出现错乱，导致很差的视觉效果

接下来我们恢复对边界值的设置，再来看下效果：

此时当我们达到我们设置的最小宽度的时候，页面就不会出现错乱情况了，max-weight的应用场景和其类似，有兴趣的可以自己实践下。

在pc端开发的时候min/max-weight的使用起着很关键的作用。

下面介绍书中的一些知识点：

1. min-height/min-width 的初始值为auto
2. max-height/max-width 的初始值为none

3. max/min-width 超越！Important，具有最高优先级

   <img src="1.jpg" style="width:480px!important;">
   img { max-width: 256px; }
   <--此时图片的真实宽度应该为256px-->
   

4. 超越最大

   .container {
   min-width: 1400px;
   max-width: 1200px;
   }
   
   

从字面来来看，超越最大，一个容器的最小宽度竟然比最大宽度还打，超越最大意思不就是min超越max，因此容器的实际宽度为1400px。

上面就是自己对min/max-height/width的理解，很多在张鑫旭大佬的css世界中学习到了很多的东西，希望大家有时间可以看下，欢迎补充。