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

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

c语言中边框所占两列一行,css中的border-collapse属性如何设置表格边框线？（代码示例）...
css中的border-collapse属性如何设置表格边框线?本篇文章就给大家介绍css中的border-collapse属性是什么? border-collapse属性设置表格边框线的方法.有一定 ...
原生HTML：img 相关属性详解（alt属性,onerror事件，以及其他基本属性）,css中的object-fit
语法:<img> 属性: 1.src 指定要显示图像的URL 2.width 宽度,指定图像的宽度以px作为单位的数值,px可以省略 3.height 高度,指定 ...
html中display属性含义,css中display是什么意思？
display是CSS中的一个常用属性,可用于规定元素应该生成的框的类型,在网页开发中经常需要用到.下面本篇文章就来给大家介绍一下CSS display属性,希望对大家有所帮助. display属性规 ...
html5中背景图片的大小怎么调,css中怎么改变背景图片大小？
在CSS中,想要改变背景图片的大小,可以通过设置background-size属性来实现.下面本篇文章就来给大家介绍一下使用background-size属性改变背景图片大小的方法,希望对大家有所帮助 ...
CSS中定义多个链接样式,在CSS中定义【导航栏】超链接样式
1.案例css代码 .divcss5 a:link{ color:#F00}/* 链接默认为红色 */ .divcss5 a:hover{ color:#000}/* 鼠标悬停黑色 */ .divcs ...
css中字的大小,字体大小大于CSS中设置的大小
当我将字体大小设置为特定像素高度时,计算出的字体大小是我在CSS中设置的大小的1.333倍.但是,如果我将字体大小设置为百分比,则使用正确的大小.这种情况发生在我尝试的每个浏览器中,包括Firefox ...
html中如何修改表格标题栏,如何设置css中表格标题caption标签的位置
如何设置css中表格标题caption标签的位置发布时间:2020-07-13 10:26:45 来源:亿速云阅读:182 作者:Leah 这篇文章运用简单易懂的例子给大家介绍如何设置css中表格 ...
html中选择字体的元素,深入探讨CSS中字体元素
深入探讨CSS中字体元素更新时间:2006年09月25日 00:00:00 作者: 字体的处理在网页设计中无论怎么强调也不为过,毕竟网页使用来传递信息的,而最经典最直接的信息传递方式就是文字,所 ...
html中的float含义,css中float是什么意思？
float是CSS中的浮动属性,当元素设置了float属性就会脱离标准流,浮动在其他元素上,它会根据属性值向左或者向右浮动. CSS中的float属性是一个频繁用到的属性,对于初学者来说,如果没有理解 ...

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属性中min-content、max-content的含义，css中minmax()用法、1fr单位的含义----使页面具有相应性的属性以及属性值相关推荐

最新文章

热门文章