关于width属性max/min-content和fit-content

自适应内部元素

在css3中width的新的属性max/min-content和fit-content、fill-availablea属性，作用是什么？

兼容性如图,在移动端已经使用，目前都有是有前缀：

例如：

.min-content {
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;    
}

关于width属性max/min-content和fit-content

分别介绍一下这三个属性的意义：

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是会个跟随有定宽的的最大最小宽度，不会进行收缩。

min-content的例子：

将图片同级文字显示根据图片的大小一样

3.fit-content的属性

width:fit-content可以实现元素收缩效果的同时，保持原本的block水平状态，于是，就可以直接使用margin:auto实现元素向内自适应同时的居中效果了。就是div的自适应宽度不是100%而是内容的大小。很好的实现了，block元素的水平居中

对于三种属性，2,3分别对1属性进行比较说明：

如下：

1与2中的min-content属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    .box {
        background-color: #f0f3f9;
        padding: 10px;
        margin: 10px 0 20px;
        overflow: hidden;
    }

    .inline-block {
        display: inline-block;
    }
    .min-content {
        width: -webkit-min-content;
        width: -moz-min-content;
        width: min-content;
    }
</style>
<body>
<strong>display:inline-block;</strong>
<div class="box inline-block">
    <img src="flower.jpg">
    <p>display:inline-block具有收缩特性，但这里宽度随文字。而width:min-content随图片。</p>
</div>

<strong>width: min-content;</strong>
<div class="box min-content">
    <img src="flower.jpg">
    <p>display:inline-block具有收缩特性，但这里宽度随文字。而width:min-content随图片。</p>
</div>
</body>
</html>

View Code