第二关：min-width/max-width和max-height/max-height

和width/height相比，min-width/height和max-width/height有以下四点不同：

1、min-width/max-width是为流而生的，像width/height这种定死的砖头式布局，min-width/max-width就没有存在的意义 ，min-width/max-width一定是自适应布局或流体布局中。常应用于表格或图片，在公众号的热门文章中，经常会有图片，这些图片都是用户上传产生的，大小不一，为了避免图片在移动端显示过大影响体验，常常会做下面的max-width限制

img {max-width: 100%;height: auto!important;}

height:auto是必需的，否则，如果原始图片有设定height,max-width生效的时候，图片就会被水平压缩。强制height为auto可以确保宽度不超出的同时使图片保持原有的比例。这样设置体验上存在的问题是：在加载时图片占据高度会从0变成计算高度，图文出现明显的瀑布式下落。

2、与众不同的初始值

max-width/height初始值为none

min-width/height初始值为auto

3、超越!important， 超越最大

超越!important：max-width会覆盖width,即使width使用了!important

<img src="1.jpg" style="width:480px!important;">

img {max-width: 256px;}

超越最大：当设置的min-width比max-width大时，min-width权重大

4、任意高度元素的展开收起动画技术

实现展开收起效果：height + overflow: hidden

element {height: 0; overflow: hidden; transition: height 0.25s;}
element.active {height:auto;}

没有transition效果，只是生硬的展开

优化：

element {height: 0;overflow: hidden; transition: max-height 0.25s;}
element.active {max-height: 800px;}

只要保证展开的max-height值比展开内容高度大就可以，一个高度不定的任意元素的展开动画效果就实现了。