fit-content | max-content | min-content前言记录一下CSS3 中 width属性

前言

记录一下CSS3 中 width属性相关的值.通过在浏览器中输入width, 弹窗具有以下如属性.

这里主要对fill-available, fit-content, min-content, max-content几个属性展开说明.

1. fill-available(默认)

1.1 fill-available 属性值的理解

fill-available属性值比较容易理解, 充分利用可用空间, 当我们编写一个没有其他样式的<div>元素, 此时该元素的width表现就是fill-availabel, 自动填满空间.

也就是我们常说的盒模型, 盒模型的margin, border, padding,content水平值的和为父元素的width属性值的100%

<style>
  .wrap {
    width: 500px;
    height: 300px;
    border: 4px solid #0daabe;
    padding: 4px;
  }
  .item {
    border: 4px solid #409eff;
    background: #fe731a;
    margin-bottom: 6px;
  }
</style>

<div class="wrap">
  <div class="item">敬天爱人</div>
  <div class="item">心不唤物，物不至</div>
  <div class="item">
    你心中描画怎样的蓝图，决定了你将度过怎样的人生。强烈的意念，将作为现象显现——请你首先铭记这个“宇宙的法则
  </div>
</div>

这种充分利用可用空间的行为就称为"fill-available"

1.2 使用场景

fill-available关键字使用的价值就在于, 当我们需要将一个inline-block元素, 向block元素一样具有100%自动填充时, 不用在修改display特性, 修改为block了, 修改display特性可能会带来一些其他问题此时我们就可以让具有包裹性的inline-block元素具有了100%自动填充特性.

示例:
我们以图片为例

<style>
.wrap {
  width: 500px;
  height: 500px;
  border: 4px solid #0daabe;
  padding: 4px;
}
.img {
} 
</style>

<div class="wrap">
  <img class="img" src="./1.jpg" alt="" />
</div>

如果此时图片使用fill-available, 测试图片就宽度就会自动填充空间, 同时并没有改变<img>元素的原始特性.

.img {
  width: -webkit-fill-available;
}

2. min-content

2.1 min-content 属性值理解

min-content宽度表示的并不是内部那个宽度小就是那个宽度.而是，采用内部元素最小宽度值最大的那个元素的宽度作为最终容器的宽度。

首先,我们需要明白"最小宽度值"是什么意思.比如

图片元素的最小宽度值就是图片默认的宽度
文本元素, 如果全是中文, 最小宽度值就是一个中文的宽度; 如果包含英文, 英文单词默认不换行, 最小宽度就是英文单词中最长的宽度

<style>
  .wrap {
    width: 500px;
    /* height: 300px; */
    border: 4px solid #0daabe;
    padding: 4px;
  }
  .item {
    border: 4px solid #409eff;
    background: #fe731a;
    margin-bottom: 6px;
    width: min-content;
  }
</style>

<div class="wrap">
  <div class="item">敬天爱人</div>
  <div class="item">心不唤物,物不至helloworld</div>
</div>

2.2 使用场景

如果我们进行图文时, 希望文字的宽度不要超过图片的宽度, 我们可以选择使用该属性.

<style>
.wrap {
  width: 500px;
  /* height: 300px; */
  border: 4px solid #0daabe;
  padding: 4px;
}
.item {
  border: 4px solid #409eff;
  background: #fe731a;
  margin-bottom: 6px;
  width: min-content;
}
</style>

<div class="wrap">
  <div class="item">
    <img src="./1.jpg" alt="" />
    你心中描画怎样的蓝图,决定了你将度过怎样的人生.强烈的意念,将作为现象显现请你首先铭记这个宇宙的法则
  </div>
</div>

3. max-content

3.1 max-content 属性值的理解

max-content：简单理解就是假设我们的容器有足够的宽度，足够的空间
此时，所占据的宽度是就是max-content所表示的尺寸。

也就是说max-content会采用内部元素的宽度值最大的元素作为容器的宽度

如果为只有文本, 则文本不换行, 容器的最大宽度就是文本的宽度
如果有文本,图片, 选择最大元素宽度作为容器宽度

3.2 使用示例

当文本内容不换行为最大宽度, 此时容器宽度等于文本宽度

示例:

<style>
  .wrap {
    width: 500px;
    border: 4px solid #0daabe;
    padding: 4px;
  }
  .item {
    border: 4px solid #409eff;
    background: #fe731a;
    margin-bottom: 6px;
    width: max-content;
  }
</style>

<div class="wrap">
  <div class="item">
    <img src="./1.jpg" alt="" />
    <div>
      你心中描画怎样的蓝图,决定了你将度过怎样的人生.强烈的意念,将作为现象显现请你首先铭记这个宇宙的法则
    </div>
  </div>
</div>

fit-content

4.1 fit-content 属性值的理解

width:fit-content可以实现元素收缩效果, 表现和float, absolute, inline-block一样

虽然现在有这么多方式实现包裹性的特性. 但他们都是在不同的场景下使用. 同样的,我们需要关注的是在什么样场景下使用fit-content.

4.2 使用场景

比如我们想实现水平居中, 其他包裹性元素会具有以下问题

float 只能左浮动和右浮动, 肯定不行
absolute 绝对定位虽然可以实现水平居中, 但会脱离文档流是最大的弊病
inline-block 元素水平居中需要父元素额外的设置text-align:center

我们比较常用的水平居中,也就是absolute和block元素的margin: auto了

但是block问题在于我们需要给元素添加固定宽度, 这就无法更加内容来自适应宽度

此时我们就可以使用fit-content, 在不修改block元素特性的情况下, 实现根据内容宽度自适应容器的宽度, 具有了包裹性

<style>
  .wrap {
    width: 500px;
    /* height: 300px; */
    border: 4px solid #0daabe;
    padding: 4px;
  }
  .item {
    border: 4px solid #409eff;
    background: #fe731a;
    margin-bottom: 6px;
    width: fit-content;
    margin: auto;
  }

</style>


<div class="wrap">
  <div class="item">
    <img src="./1.jpg" alt="" />
    <div>你心中描画怎样的蓝图</div>
  </div>
</div>

4.3 与max-content区别

max-content 和 fit-content的区别

在元素没有超过父容器宽度时, 二者表现一致
如果元素超过了父容器宽度,fit-content最大和父容器宽度一致, 而max-content会超出容器

示例: fit-content

<style>
  .wrap {
    width: 500px;
    border: 4px solid #0daabe;
    padding: 4px;
  }
  .item {
    border: 4px solid #409eff;
    background: #fe731a;
    margin-bottom: 6px;
    width: fit-content;
  }
</style>

<div class="wrap">
  <div class="item">
    <img src="./1.jpg" alt="" />
    <div>
      你心中描画怎样的蓝图,决定了你将度过怎样的人生.强烈的意念,将作为现象显现请你首先铭记这个宇宙的法则
    </div>
  </div>
</div>

如果修改使用max-content 效果可以参照上面max-content示例

浏览器兼容性考虑

在使用fit-content属性时，我们还需要考虑浏览器的兼容性。目前，fit-content属性在各个主流浏览器已经得到广泛支持，包括Chrome、Firefox、Safari和Edge等。但是请注意，在一些老旧的浏览器版本中，可能不支持该属性或者只支持部分功能。

1、width:fill-available

自适应父元素宽度

2、width:max-content

宽度为最长宽度的子元素的宽度

3、width:min-content

宽度为最小宽度值中最大的值

width/height 的属性值 fit-content 这是一个 CSS3 属性，用来设置元素的宽度和高度，值为 fit-content，表示元素的宽度和高度会根据内容自动适应。

先看兼容性(除了IE，主流浏览器本都支持了)：caniuse.com

发现这个属性值还是在去年的项目中，在此之前从来没用过这个，甚至都不知道有这个 😰 。

有如下结构的 html 代码

<div class="container">
    <div class="left_content">31231</div>
    <div class="right_content">31231</div>
</div>

container 占满整个区域（即 container 宽高基本固定），当内部内容宽高超过 container 的宽高时可以滚动, 在 container 容器中， left_content 和 right_content 高度都是根据后端接口返回数据渲染出来，高度不确定，需要根据内容自适应高度。

 .container {
    display: flex;
    width: 300px;
    height: 300px;
    overflow: auto;
    background-color: aqua;
}
.left_content {
    flex: 1;
    background-color: rosybrown;
}
.right_content {
    flex: 1;
    background-color: lightgreen;
}

当 left_content 和 right_content 高度比 container 高时，container 出现滚动条，但 left_content 或者 right_content 的高度不会改变，始终和 container 保持一致，但left_content 和 right_content 的内容会溢出。显示异常

如图

此时将 left_content 和 right_content 的 css 修改一下

.left_content {
   ...
   height: fit-content
}
.right_content {
    height: fit-content
}

效果如图：

盒子高度始终和内容高度保持一致

fit-content 在其他场景下的应用，我暂时还没遇到。毕竟之前都没用过...

除 fit-content 外，还有其他2个属性值也有点意思

1、min-content 在文本不换行的情况下，将容器压缩到最小宽度；如果内容是文本，会以单词为单位换行，中文会以单个字为单位换行， 2、max-content 在文本不换行的情况下，将容器压缩到最大宽度，即在一行展示内容；初始 html 代码和 css 代码如下：

 <div class="parent">
    <div class="box" style="background-color: gray;overflow: hidden;">
       <img src="./R.jpeg" width="100" alt="">
        <div>3123， 131， 231，31231，31231，312313，23131，231312，3131，313，123，1312，313，1231</div>
    </div>
</div>

.parent {
    width: 300px;
    height: 300px;
    background-color: blueviolet;
}

当 box 容器不设置width时，他默认会撑满整个父容器

如图：

给 box 设置 display为inline-block，此时 box 的宽度会收缩到能包裹子元素的最小宽度

看图理解 `min-content`

只给 box 容器设置 width 为 min-content

效果如下图

因为此时图片的宽度为可被压缩的最小宽度，所以，box 会收缩到刚好能包裹图片的宽度。

如果box内的元素的文本最小长度超过图片宽度，box 的宽度会收缩到刚好能包裹文本的最小宽度。效果如下图

看图理解 `max-content`

只给 box 容器设置 width 为 min-content
效果如图，当内容过多时会溢出

`fit-content` 结合了 `min-content` 和 `max-content`

即，如果 box 设置了 width：fit-content, 默认限制为 100%：

当 box 内的元素设置了 min-content 时，box 的宽度会按 min-content 效果展现
当 box 内的元素设置了 max-content 时，box 的宽度会按 max-content 效果展现
当 box 内的既有元素设置了 max-content 又有元素设置了 min-content，box 的宽度会按 max-content 和 min-content 以及其他未设置 width 为这三个属性的最大宽度效果展现如图：

fit-content | max-content | min-content

前言