CSS min-width/max-width和min-height/max-height二三事
min-width / max-width 和 min-height / max-height
min-width/max-width
它们是具有边界行为的属性,在做自适应页面时候会大量使用
.container {
min-width: 1200px;
max-width: 1400px;
}
上面的CSS就是指定宽度所属范围；
一些论坛图片都是用户上传产生的，因此尺寸会有大有小，为了避免图片在移动端展示过大影响体验，常常会有下面的 max-width 限制：
img {
max-width: 100%;
height: auto!important;
}
height:auto 是必需的，否则，如果原始图片有设定 height，max-width 生效的时候，图片就会被水平压缩。强制 height 为 auto 可以确保宽度不超出的同时使图片保持原来的比 例。
但这样也会有体验上的问题，那就是在加载时图片占据高度会从 0 变成计算高度，图文会有明显的瀑布式下落。
与众不同的初始值
width/height 的默认值是 auto，而 min-width/max-width 和 min-heigh/max-height 的初始值则要复杂些。
- max-width和max-height的初始值是none
- min-width/min-height 的初始值是 0
- 作者推出浏览器实际实现的是 auto（未亲自验证）
（1）min-wdith/height 值为 auto 合法。
<body style="min-width:auto;">
结果所有浏览器下：
document.body.style.minWidth; // 结果是 auto
说明 min-*支持 auto 值，同样，如果是 max-width:auto，结果则是’’，进一步证明min-width/height 值为 auto 合法。
（2）数值变化无动画。
下面这么写没有动画；
.box {
transition: min-height .3s;
}
.box:hover {
min-height: 300px;
}
下面这么写是有动画的
.box {
min-height: 0;
transition: min-height .3s;
}
.box:hover {
min-height: 300px;
}
权重超越!important ； min权重超越max权重
1．权重超越!important
指的是max-width 会覆盖width，
<img src="1.jpg" style="width:480px!important;">
img { max-width: 256px; }
实际为 256px。会覆盖掉style、!important
2．min权重超越max权重
.container {
min-width: 1400px;
max-width: 1200px;
}
小宽度居然比最大宽度设置得还大，min-width 生效，max-width 被忽略，于是，.container 元素表现为至少 1400 像素宽。（注意不是“后来居上”规则）
任意高度元素的展开收起动画技术
写未知高度的图片的展开和收起(传统实现可以使用 jQuery 的 slideUp()/slideDown()方法)
CSS写法如下
.element {
max-height: 0;
overflow: hidden;
transition: max-height .25s;
}
.element.active {
max-height: 666px; /* 一个足够大的最大高度值 */
}
其中展开后的 max-height 值，我们只需要设定为保证比展开内容高度大的值就可以，因为max-height 值比 height 计算值大的时候，元素的高度就是 height 属性的计算高度，
如果 max-height 值太大，在收起的时候可能会有“效果延迟”的问题，比方说，我们展开的元素高度是 100 像素，而 max-height 是 1000 像素，动画时间是 250 ms，假设我们动画函数是线性的，则前 225 ms 我们是看不到收起效果的，
因为max-height 从 1000 像素到 100 像素变化这段时间，元素不会有区域被隐藏，会给人动画延迟 225 ms 的感觉，
建议 max-height 使用足够安全的最小值，这样，收起时即使有延迟，也会因为时间很短，很难被用户察觉，并不会影响体验。
