min-width、max-width属性中min-content、max-content的含义，css中minmax()用法、1fr单位的含义----使页面具有相应性的属性以及属性值

min-width、max-width属性中min-content、max-content的含义，css中minmax()用法、1fr单位的含义

• min-width 表示容器的最小宽度
• max-width 表示容器的最大宽度

.box{
	min-width: 300px; # 表示容器的最小宽度为300px
}

• min-content： 是一个属性值，是min-width、max-width的属性值。以.box容器为例，表示的含义是.box的最小宽度，应适应这个容器内部相对较短的不可断行的元素宽度（即最宽的单词、图片或具有固定宽度的盒元素）

不举栗子，举个荔枝吧
html

  <div class='box'>
    <p class="p1">我是一段很长的文字啊,我是一段很长的文字啊,我是一段很长的文字啊我是一段很长的文字啊，我是一段很长的文字啊455445544，我是一段很长的文字啊，我是一段很长的文字啊</p>
    <p class="p2">我是短的文字我，我是短的文字，</p>
  </div>

css

    .box{
      min-width:min-content;
      border: 1px solid red;
    }
    .p2{
      width:200px;
      border: 1px solid green;
    }

.box容器的宽度与p2宽度相等时，将不再变化

• max-content： 宽度与最大内容适配，假设我们的.box容器有足够的宽度，足够的空间，此时，.box容器所占据的宽度是就是max-content所表示的尺寸，而.box的收缩情况，取决于屏幕和设置的min-width 、max-width有关

总共4种组合
min-width: min-content
min-width: max-content
max-width:min-content
max-width:max-content
另外，min-width与max-width可以一起用

• minmax() css中的函数，主要用在grid的布局中，一般来设置列的最大最小宽

语法：
此函数包含两个参数，最小值 和 最大值.

每个参数分别是<length>、<percentage>、<flex>的一种，或者是max-content、min-content、或auto之一。

如果 最大值 < 最小值，则最大值被忽略并且minmax(最小值,最大值)被看成最小值。 值作为最大值时设置网格轨道的弹性系数；作为最小值时无效。

• <flex>
  单位为fr的非负维度，指定轨道弹性布局的系数值。每个<flex>长度的轨道都以其系数值比例均分剩余空间。

MDN 中的例子

#container {
  display: grid;
  grid-template-columns: minmax(max-content, 300px) minmax(200px, 1fr) 150px;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}