阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

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

      目录
      目录