CSS3 Width 属性新的值

来源：理解CSS3 max/min-content及fit-content等width值 « 张鑫旭-鑫空间-鑫生活

fill-available

可以让 span、a或者设置了display: inline-block属性的div元素的宽度为当前元素容器的宽度

.box {
    width: 70%;
    height: 200px; line-height: 200px;
    padding: 10px; margin: 10px auto;
    background-color: #f0f3f9;
    resize: horizontal;
    overflow: hidden;
}
.fill-available {
    display: inline-block;
    line-height: 20px;
    padding: 20px;
    background-color: #cd0000;
    color: #fff;
    vertical-align: middle;
    
    width: -webkit-fill-available;
    width: -moz-fill-available;
    width: -moz-available;    /* FireFox目前这个生效 */
    width: fill-available;
}
 
##### HTML代码：
 
<strong>width: fill-available;</strong>
<div class="box">
    <p class="fill-available">
      width:fill-available可以让元素的宽度表现为默认的block水平元素的尺寸表现。<br>
      但这里实际上是display:inline-block水平的，<br>
      于是，我们可以保证宽度满尺寸自适应的同时使用line-height实现近似的垂直居中效果。
    </p>
</div>

max-content

max-content的行为表现可以这么理解，假设我们的容器有足够的宽度，足够的空间，此时，所占据的宽度是就是max-content所表示的尺寸。

fit-content

效果与 display: inline-block看起来一样，但是 inline-block 居中要靠父元素，fit-content直接使用margin: auto 就可以