css中我们用width,height,一般就是具体的尺寸,或者百分比之类,今天看到其实还有这几个属性:fill-available、max-content、min-content、fit-content。这几个还挺实用,今天就来看看啥意思。

fill-available

fill-available的表面意思是填充剩余空间。

在inline-block中,宽度为fill-available,可以填充整个宽度,表现的如block一般;如果高度设置为fill-available,则可以填充整个高度。

fit-content

fit-content的意思是适应内容。

在block中,设置fit-content,可以表现的如inline-block。这种一般用在水平居中上。

min-content

这个意思就是采用最小内容宽度,这个稍微复杂点。

对于纯中文来说,那么min-content就是一个中文的宽度;对于一串没有分隔符号的英文来说,min-content就是整个英文的长度;对于有分割符的英文来说,min-content就是能分割后的长度;对于图片,block等其它来说,min-content就是它们自身的宽度。

而min-content就是取内容中所有min-content最大的那个,能包裹住所有内容。例如一段中文和一个图片在一起,那么min-content一般为图片的宽度,前提是图片的宽度大于一个中文的宽度,如果图片很小,小于一个中文的宽度,那么min-content肯定就是一个中文的宽度了。

max-content

这个就是采用最大内容的宽度,不过和min-content不同,如果max-content中有文字,不管中文,英文,它的宽度相当于不换行的那种,然后再去比较那个内容的宽度最长。

注意事项

这个要注意兼容问题,加上-webkit-,-moz-前缀。同时在fill-available中,起效果的不是-moz-fill-available中,而是-moz-available。这个要注意下。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字