CSS min-width/max-width和min-height/max-height二三事

本文目录结构

min-width / max-widthmin-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 使用足够安全的最小值,这样,收起时即使有延迟,也会因为时间很短,很难被用户察觉,并不会影响体验。

AXIHE / 精选教程

浏览全部教程

HTML

CSS

JS

关于本站

阿西河前端教程more,是一个提供大前端开发教程的网站;这里不仅会有传统的WEB开发教程,还会包含Nodejs,Docker,云服务相关的介绍;