前言

記錄一下CSS3 中 width屬性相關(guān)的值.通過在瀏覽器中輸入width, 彈窗具有以下如屬性

這里主要對fill-available, fit-content, min-content, max-content幾個屬性展開說明

備注一下: 簡書這邊圖片上傳不了, 如要看代碼效果的可以查看CSDN 博客
CSDN博客

1. fill-available(默認(rèn))

1.1 fill-available 屬性值的理解

fill-available屬性值比較容易理解, 充分利用可用空間, 當(dāng)我們編寫一個沒有其他樣式的<div>元素, 此時該元素的width表現(xiàn)就是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">
    你心中描畫怎樣的藍(lán)圖，決定了你將度過怎樣的人生。強(qiáng)烈的意念，將作為現(xiàn)象顯現(xiàn)——請你首先銘記這個“宇宙的法則
  </div>
</div>

這種充分利用可用空間的行為就稱為"fill-available"

1.2 使用場景

fill-available關(guān)鍵字使用的價值就在于, 當(dāng)我們需要將一個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寬度表示的并不是內(nèi)部那個寬度小就是那個寬度. 而是，采用內(nèi)部元素最小寬度值最大的那個元素的寬度作為最終容器的寬度。
首先,我們需要明白"最小寬度值"是什么意思.比如

• 圖片元素的最小寬度值就是圖片默認(rèn)的寬度
• 文本元素, 如果全是中文, 最小寬度值就是一個中文的寬度; 如果包含英文, 英文單詞默認(rèn)不換行, 最小寬度就是英文單詞中最長的寬度

示例:

<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 使用場景

如果我們進(jìn)行圖文不僅時, 希望文字的寬度不要超過圖片的寬度, 我們可以選擇使用該屬性

示例:

<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="" />
    你心中描畫怎樣的藍(lán)圖,決定了你將度過怎樣的人生.強(qiáng)烈的意念,將作為現(xiàn)象顯現(xiàn)請你首先銘記這個宇宙的法則
  </div>
</div>

3. max-content

3.1 max-content 屬性值的理解

max-content：簡單理解就是假設(shè)我們的容器有足夠的寬度，足夠的空間
此時，所占據(jù)的寬度是就是max-content所表示的尺寸。

也就是說max-content會采用內(nèi)部元素的寬度值最大的元素作為容器的寬度

• 如果為只有文本, 則文本不換行, 容器的最大寬度就是文本的寬度
• 如果有文本,圖片, 選擇最大元素寬度作為容器寬度

3.2 使用示例

當(dāng)文本內(nèi)容不換行為最大寬度, 此時容器寬度等于文本寬度

示例:

<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>
      你心中描畫怎樣的藍(lán)圖,決定了你將度過怎樣的人生.強(qiáng)烈的意念,將作為現(xiàn)象顯現(xiàn)請你首先銘記這個宇宙的法則
    </div>
  </div>
</div>

如果文字寬度小于圖片寬度;容器最大寬度就是圖片寬度:

4. fit-content

4.1 fit-content 屬性值的理解

width:fit-content可以實現(xiàn)元素收縮效果, 表現(xiàn)和float, absolute, inline-block一樣

雖然現(xiàn)在有這么多方式實現(xiàn)包裹性的特性. 但他們都是在不同的場景下使用. 同樣的,我們需要關(guān)注的是在什么樣場景下使用fit-content

4.2 使用場景

比如我們想實現(xiàn)水平居中, 其他包裹性元素會具有以下問題

• float 只能左浮動和右浮動, 肯定不行
• absolute 絕對定位雖然可以實現(xiàn)水平居中, 但會脫離文檔流是最大的弊病
• inline-block 元素水平居中需要父元素額外的設(shè)置text-align:center

我們比較常用的水平居中, 也就是absolute和block元素的margin: auto了
但是block問題在于我們需要給元素添加固定寬度, 這就無法更加內(nèi)容來自適應(yīng)寬度

此時我們就可以使用fit-content, 在不修改block元素特性的情況下, 實現(xiàn)根據(jù)內(nèi)容寬度自適應(yīng)容器的寬度, 具有了包裹性

示例:

<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>你心中描畫怎樣的藍(lán)圖</div>
  </div>
</div>

4.3 與max-content區(qū)別

max-content 和fit-content的區(qū)別

• 在元素沒有超過父容器寬度是, 二者表現(xiàn)一致
• 如果元素超過了父容器寬度,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>
      你心中描畫怎樣的藍(lán)圖,決定了你將度過怎樣的人生.強(qiáng)烈的意念,將作為現(xiàn)象顯現(xiàn)請你首先銘記這個宇宙的法則
    </div>
  </div>
</div>

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

5. 瀏覽器兼容性考慮

在使用fit-content屬性時，我們還需要考慮瀏覽器的兼容性。目前，fit-content屬性在各個主流瀏覽器已經(jīng)得到廣泛支持，包括Chrome、Firefox、Safari和Edge等。但是請注意，在一些老舊的瀏覽器版本中，可能不支持該屬性或者只支持部分功能。