自适应内部元素

前言

CSS3 为宽度（width）和高度（height）添加了四个新的属性：fill-availabel | fit-content | min-content | max-content

fill-availabel

未完全支持

• 作用：撑满可用空间，和一个初始的 div 元素行为一样，会宽度会撑满父容器，即 width: 100%

• 其价值在于，不止可以应用在 block 上，还可以应用在 inline-block 上

  .not-fill-available {
      display: inline-block;
      background: yellowgreen;
  }
  .fill-available {
      display: inline-block;
      width: -webkit-fill-available;
      background: deeppink;
  }

  

• 在高度上使用，还能完成等高布局

fit-content

• 作用：将元素宽度收缩为内容宽度

• 场景：水平居中

  .box {
      width: fit-content;
      margin: auto;
  }

  

min-content

• 作用：采用内部元素最小宽度值最大的那个元素的宽度作为最终容器的宽度

• 解释最小宽度值：图片的最小宽度值是图片呈现的宽度；对于文本元素，如果全部是中文，则最小宽度值是一个中文的宽度值；如果包含英文，因为默认英文单词不换行，所以最小宽度是里面最长的英文单词的宽度

• 可以十分简单的实现由大图片决定父级宽度的场景

  <figure>
      <img src="avatar.jpg" alt="avatar">
      <figcaption>
          This is one of my favorite avatars. I think she is very cute!
      </figcaption>
  </figure>

  figure {
      max-width: 300px; /* 回退机制 */
      max-width: min-content;
      margin: auto;
  }
  figure > img { max-width: inherit; } /* 回退机制 */

  

max-content

• 作用：采用内部元素宽度值最大的那个元素的宽度作为最终容器的宽度
• 如果有一个子元素是长文本，则相当于文本不换行