CSS3中用于自适应的四大属性值
在学习这四种用于自适应的属性值前，我们得先对 元素尺寸 这个概念有个清晰的了解：
一、元素尺寸
- 从元素的嵌套角度看，元素尺寸可分为两种：
- 1.外部元素尺寸：由元素的父元素决定的尺寸值
- 2.内部元素尺寸：由元素的内部子元素决定的尺寸值
今天我将要介绍的四种属性值中fill-available则属于外部尺寸，而其他三个属性值都属于内部尺寸，至于为什么各自归属的类别是这样的，下面我会举具体的例子展示给大家，话不多说，上主菜！。
二、理解 fit-content
- fit-content，从语义上来讲正如大家所想的一样，它是 自适应内容 的属性值，其实它正如定义所讲般，它就是去适应内容的，所以这个属性值不难理解，具体的源码及最终效果如下：
这是未使用fit-content的效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TEST DEMO</title>
<style>
/* 父元素的样式 */
div.father{
height: 300px;/* 给父元素定高 */
background-color: #f90;/* 黄色 */
}
/* 子元素的样式 */
div.child{
height: 100px;
background-color: #1496bb;/* 蓝色 */
}
</style>
</head>
<body>
<div class="father">
<div class="child"></div>
</div>
</div>
</body>
</html>
使用fit-content后的效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TEST DEMO</title>
<style>
/* 父元素的样式 */
div.father{
height: fit-content;/* 给父元素施加fit-content */
background-color: #f90;/* 黄色 */
}
/* 子元素的样式 */
div.child{
height: 100px;
background-color: #1496bb;/* 蓝色 */
}
</style>
</head>
<body>
<div class="father">
<div class="child"> </div>
</div>
</div>
</body>
</html>
通过对比，我们不难发现：当我们将原先父元素固定的高度300px改为fit-content后，父元素的高度就变得和其子元素一样高了，同为100px。
从表面上看fit-content的原理就是去将某个元素的宽高设为与其内容一致大小，但其实这里与内联元素inline-block、浮动以及绝对定位的本质是相似的，无论是fit-content还是浮动还是绝对定位，我们可以认为它们都是通过变成内联元素形式达到的自适应内容的目的。这在CSS体系中被称为是 shrink-to-fit，这是CSS中常见的一种尺寸表现，顾名思义：缩放到合适。
讲到这里，或许很多人会说，既然如此，那何必又要使用fit-content呢？直接使用display: inline-block达到自适应内容的目的不就可以了么？没错！这就要提到这么一个问题了：假设有一个需求，要你去将某一元素转换成内联元素形式使用，但之后你发现该元素又需要设置其他的display属性值，此时问题很明显，那就是我们根本无法同时给一个元素设置一个以上的相同属性。比如，此时既要有display: flex，又要有display: inline-block，显然，我们是无法同时设置两个display的，对于这种问题，我们现在讲的这四种属性就派上用场了！比如：我们可以使用fit-content去替代display: inline-block，然后再使用display: flex，这样就避免了重使用属性的冲突，这只是一个简单的例子，但实际上这种类似的问题存在许多，这也是为什么CSS3要将CSS2.1体系的元素尺寸进行统一标准化的原因所在。
我认为这四种属性存在的意义大致有三个：
- 结合grid布局，使得其更加方便简洁强大。当学习到grid布局的时候，大家就会明白这四种自适应属性在其中的强大之处。
- 更加清晰明了的划分CSS体系中元素尺寸这一领域的使用。
- 这是我认为最重要的一个原因，那就是拥有设置display其他属性值的效果而不影响原有display属性值的作用。
三、理解 fill-available
前面我们了解了fit-content的具体作用及效果，这次我们来研究下fill-available这个属性值。
从字面意义上讲，fill-available指的是 填充满可得到的空间，实际上，它的作用等价于我们经常使用的 100%，比如：width: 100%就等价于width: fill-available。它是一种外部尺寸，是由元素的父元素的size决定的值，比如父元素的width为100px，而它的子元素设为width: fill-available，那么该子元素的width最终将会与其父元素一致，都为100px，所以实际上fill-available是由外部尺寸决定的尺寸大小。说了那么多，不如上代码瞧瞧？
未使用fill-available的效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TEST DEMO</title>
<style>
/* 父元素的样式 */
div.father{
height: 300px;
background-color: #f90;/* 黄色 */
}
/* 子元素的样式 */
div.child{
height: 100px;/* 子元素高度设为100px */
background-color: #1496bb;/* 蓝色 */
}
</style>
</head>
<body>
<div class="father">
<div class="child"></div>
</div>
</div>
</body>
</html>
使用了fill-available后的效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TEST DEMO</title>
<style>
/* 父元素的样式 */
div.father{
height: 300px;
background-color: #f90;/* 黄色 */
}
/* 子元素的样式 */
div.child{
height: -webkit-fill-available;/* 子元素高度设为fill-available */
background-color: #1496bb;/* 蓝色 */
}
</style>
</head>
<body>
<div class="father">
<div class="child"></div>
</div>
</div>
</body>
</html>
通过对比，我们可以知道，fill-available的效果实际上就类似于100%这种尺寸大小的设置，属于一种充满可用空间的元素尺寸技术。
四、理解 max-content
同样，从字面意思上理解max-content就是使用 最大的内容，实际上这样讲是远远不够的，max-content的真正定义是：采用子元素中最大空间尺寸的那个元素的尺寸大小，这句话读起来可能有些绕口，我们先拿实际的例子来感受一下：
未使用max-content的效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TEST DEMO</title>
<style>
div.father{
height: 300px;
border: 1px solid #aaa;
}
div.child1{
height: 100px;
background-color: #b22222;/* 红色 */
}
div.child2{
color: #fff;/* 白色 */
font-weight: bold;
background-color: #1496bb;/* 蓝色 */
}
</style>
</head>
<body>
<div class="father">
<div class="child1"></div>
<div class="child2">
正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试
</div>
</div>
</div>
</body>
</html>
使用max-content后的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TEST DEMO</title>
<style>
div.father{
height: 300px;
border: 1px solid #aaa;
width: max-content;/* 给父元素施加max-content值 */
}
div.child1{
height: 100px;
background-color: #b22222;/* 红色 */
}
div.child2{
color: #fff;/* 白色 */
font-weight: bold;
background-color: #1496bb;/* 蓝色 */
}
</style>
</head>
<body>
<div class="father">
<div class="child1"></div>
<div class="child2">
正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试
</div>
</div>
</div>
</body>
</html>
我们仔细观察一下这两个效果页面的差别，其实这里的效果类似于white-space:nowrap，即使得文字不换行。那么为什么max-content能做到这种效果呢？其实这就是对于max-content的原理的理解了。我们前面简单介绍了一下max-content的定义，它说：取子元素中尺寸最大的元素的尺寸。对此，我是这么理解的：当我给父元素div施加了width: max-content时，按照定义，width的值应当是该父元素其中的空间最大的子元素的尺寸，我们看第一个图，即未使用max-content的图，那时，文字由于占满了屏幕从而自动换行，其实此时该父元素的子元素中，空间最大的实际上就是这个包裹着许多文字的div盒子，那么它的具体空间到底多大呢？是一个屏幕的宽吗？不是的！我们这里所指的最大空间是指一个盒子所能够延伸的极限，正如第一个图展示的那样，这个包裹着文字的盒子实际的空间可以不断的往两边扩展直到这个包裹着文字的div高度等于其中一个文字的高度为止，这才是它所能延伸的最大尺寸，即我们定义中所言的最大空间，而不是简单的所看到的具体空间，那么接下来就好办了，当父元素的width是我们所分析的那样，它的值就应该是将包裹着文字的div不断往两边延伸到极限的宽度，最后就形成了第二张图的现象，即文字不换行了！这就是我对max-content具体的原理理解，你们也可以参照我的理解或其他人的看法去打造你自己的理解，因为你们可能可以挖掘到更多的看法。不过，大致上，max-content的原理就是如上所述了。
五、理解 min-content
min-content是与max-content有点相反理解的值，但也不全是反过来的，从定义上讲：min-content是指 元素中最小空间尺寸的子元素中具有最大空间尺寸的元素尺寸，哈哈哈哈，是不是乍一听就感觉人生快崩塌，三观快毁灭的节奏啊~，这个属性值在这四个属性值当中确实是最最绕的一个属性值，但是难度其实也没有多大，只要真正的抓住了对于原理上的理解，其实是不难的，接下来我会仔仔细细仔仔细细地为大家介绍这个属性值。
上面，我们知道了min-content的具体定义，对于这个定义，其实是这样的：定义中的最小空间尺寸的元素其实与上面所讲的max-content是一样一样的，我们前面讲了max-content的最大空间实际上是指能够延伸出去的最大空间，这里也是一样的，最小空间就是指能够缩放到极限的最小空间，比如下面的对比源码以及相应的运行结果：
未使用min-content的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TEST DEMO</title>
<style>
div.father{
height: 300px;
border: 1px solid #aaa;
width: 400px;
margin: 0 auto;
}
div.child1{
height: 100px;
display: inline-block;
width: 200px;
background-color: #b22222;/* 红色 */
}
div.child2{
color: #f90;/* 黄色 */
font-weight: bold;
}
</style>
</head>
<body>
<div class="father">
<div class="child1"></div>
<div class="child2">
我的祖国是China my major is 软件工程 我很开心 很快乐 很轻松 很搞笑 。。。
</div>
</div>
</div>
</body>
</html>
使用了min-content后的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TEST DEMO</title>
<style>
div.father{
height: 300px;
border: 1px solid #aaa;
width: min-content;/* 给父元素施加min-content */
margin: 0 auto;
}
div.child1{
height: 100px;
display: inline-block;
width: 200px;
background-color: #b22222;/* 红色 */
}
div.child2{
color: #f90;/* 黄色 */
font-weight: bold;
}
</style>
</head>
<body>
<div class="father">
<div class="child1"></div>
<div class="child2">
我的祖国是China my major is 软件工程 我很开心 很快乐 很轻松 很搞笑 。。。
</div>
</div>
</div>
</body>
</html>
上述两段代码中，我只将图一中父元素的width: 400px改成了width: min-content，于是结果就变得大相径庭！这究竟是道德的沦丧，还是…好了，玩笑话结束，接下来开始正经的介绍：
根据我上面所讲的那样，定义中的 最小空间 实际上指的是缩放到极限的最小空间，而对于上述的代码而言，父盒子中包裹着一个定宽定高的盒子和一个包裹着文字的盒子，那么，当我给父盒子施加min-content的时候，就意味着其中的两个子元素需要进行缩放到极限从而得到各自的最小空间，那么第一个子元素的缩放结果就是它本身的定宽200px，而第二个盒子并没有定宽，所以它的缩放结果就是宽度等于其中英文单词的宽度（这里是因为缩放时，中文字是最小的单位，而英文的最小单位并非是一个字符，而是一个完整的单词），此时，按照定义所言，我们最后要取的尺寸是缩放到极致的子元素中的 最大 尺寸，这里是取缩放后的最大，最大，最大，重要的事情说三遍！！！所以，很明显最后最小空间中最大的空间就是第一个子元素盒子的宽度，所以父元素的width最终就是第一个盒子的宽度，因此造成了最后的自适应效果。这就是min-content的原理解读。
以上是本人对于这四种属性值的理解，如有不足或问题，还请指出！谢谢。
1143
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
