width取值min-content 、 fit-content 、 max-content 的记录

with:min-content;

元素的width表现为： 元素内部中单个个体中width最大的值，就是说父级元素内部中哪个元素的宽度最大取哪个值。（父级：我的子孙中谁最宽我的width就和他一样。）min-content为内部尺寸。

应用： 竖排古诗词

/*css*/
 ul{
    list-style:none;
    overflow:hidden; /*清除子元素浮动，解决因子元素浮动导致父级高度塌陷的问题*/
 }
 ul li{
     width:min-width; /*此处单个汉字为元素内部最大的宽度值，如果是英文单词则以最长的单词为准*/
     float:left;
     margin-right:10px;
 }

<ul>
    <li>窗前明月光</li>
    <li>地上鞋两双</li>
    <li>西出无故人</li>
    <li>两眼泪汪汪</li>
</ul>

效果：

应用二：商品列表

.goods-box{
     text-align:center;
     font-size:0;
 }
.goods-box .goods-items{
     width:min-width;
     display:inline-block;
     border:1px solid red;
     font-size:16px;
  }
 .goods img{
     width:200px;
 }

    <!--html-->
    <div class="goods-box">
      <div class="goods-items">
        <img src="mouse.jpg" alt="鼠标图片">
        <span class="goods-name">鼠标贱卖</span>
      </div>
      <div class="goods-items">
        <img src="mouse.jpg" alt="鼠标图片">
        <span class="goods-name">鼠标贱卖</span>
      </div>
      <div class="goods-items">
        <img src="mouse.jpg" alt="鼠标图片">
        <span class="goods-name">鼠标贱卖</span>
      </div>
    </div>

效果：

div.goods-items的宽度将会和图片的宽度一样，所以下面span会换行展示。