在css3中新增了width的属性值：max-content;min-content和fit-content、fill-availablea，用来实现以内容为主的尺寸计算方式。
1.fill-available的意义——自动填满剩余的空间
就是有个div没有任何样式的时候，浏览器是按照自动填充的样式呈现的，就是100%width的样式填充的。按照盒子模式，不仅元素在block中可以呈现自动填满空间的样式，在inline-block上也是可以这样呈现的（包裹收缩的inline-block元素上，这里说的inline-block是具有收缩特性）。
div { display:inline-block; width:fill-available; }2.max-content和min-content是会个跟随有定宽的的最大最小宽度，不会进行收缩。
3.fit-content的属性 width:fit-content可以实现元素收缩效果的同时，保持原本的block水平状态，于是，就可以直接使用margin:auto实现元素向内自适应同时的居中效果了。就是div的自适应宽度不是100%而是内容的大小。很好的实现了，block元素的水平居中。
下面一张图形象的体现了四个属性的表现
需要提一下的是：max-content 和fit-content， 当元素内容没有超出行宽的时候，最终的宽度都是内容的宽度。而超出行宽的时候，max-content的表现是不换行，出现横向滚动条，fit-content的表现是会换行。
代码如下：
学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（从零基础开始到前端项目实战教程，学习工具，职业规划）
<style>
.dom{
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
}
</style>免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
