CSS样式表width常忽略使用的fit-content/max-content/min-content属性值

width:fit-content 居中展示

<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>

width:max-content

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

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

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

<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>

width: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>

。