对min-width/height和max-width/height的探索

1,829 阅读1分钟

和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 src="1.jpg" style="width:480px!important;">
img {max-width: 256px;}​

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值比展开内容高度大就可以,一个高度不定的任意元素的展开动画效果就实现了。