min-width,max-width,min-height,max-height

更新时间: 2024-03-11 16:24:52

# 为流体而生的 min-width / max-width

min-width / max-width 出现的场景一定是自适应布局或者流体布局中。

比如移动端限定图片最大宽度：

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

1
2
3
4

height: auto 是必须的，否则，如果原始图片有设定的height, max-width生效的时候，图片就会被水平压缩。强制 height 为 auto 可以确保宽度不超出的同时使图片保持原来的比例。

注意

但这样也会有体验问题，再加载图片时图片占据高度会从0变成计算高度，图文会有明显的瀑布式下落。

max-width 会覆盖 width,而且这种覆盖不是普通的覆盖，是超级覆盖，比!important还要高。

下面代码图片的宽度会是多少呢？

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

img { max-width: 256px;}

1
2
3

答案是 256px

超越最大指的是 min-width 覆盖 max-width，此规则发生在 min-width 和 max-width 冲突的时候。

img {
    max-width: 256px;
    min-width: 360px;
}

1
2
3
4

下图实际的宽是 360px

可以试试max-height

.element {
    max-height:666px;
    overflow: hidden;
    transition: max-height .25s;
}
.element: hover {
    max-height: 0;
}

1
2
3
4
5
6
7
8

尝试着把鼠标放我上面

注意

如果max-height值太大，在收起的时候可能会有“效果延迟”的问题。