CSS3 max/min-content及fit-content、fill-available值的案例详解

c3中对width的值多了几个值：fill-available, max-content, min-content, 以及fit-content。

1.width:fill-available

我们在页面中扔一个没有其他样式的<div>元素，则，此时，该<div>元素的width表现就是fill-available自动填满剩余的空间。

2.width:max-content

假设我们的容器有足够的宽度，足够的空间，此时，所占据的宽度是就是max-content所表示的尺寸。

3.width:min-content

min-content宽度表示的并不是内部那个宽度小就是那个宽度，而是，采用内部元素最小宽度值最大的那个元素的宽度作为最终容器的宽度。

4.width:fit-content

width:fit-content也是应该比较好理解的，“shrink-to-fit”表现，换句话说，和CSS2.1中的float, absolute, inline-block的尺寸收缩表现是一样的。

OK，然后，有小伙伴会疑问，既然跟很多CSS声明有一样的表现，那为什么还要再弄个新东西呢？

就拿水平居中效果举例，首先浮动肯定不行，因为只有左浮动和右浮动；绝对定位压根不占据空间，普通流中根本无法应用，而inline-block需要父级使用text-align:center，而本身可能还需要text-align:left略烦。

而width:fit-content可以没有这些烦恼，因为，width:fit-content可以实现元素收缩效果的同时，保持原本的block水平状态，于是，就可以直接使用margin:auto实现元素向内自适应同时的居中效果了。

<div class="w-box">
	<img src="/static/logo.png">
</div>

总结：

上面水平居中的案例就是很好的说明，可以让元素保留原有display值的特性的同时，拥有别的display值的特性。

到此这篇关于CSS3 max/min-content及fit-content、fill-available值的详解的文章就介绍到这了,更多相关CSS3 max/min-content fit-content、fill-available值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

最新评论