CSS width属性max-content,min-content,fit-content的区别

今天再做一个scroll跑马灯的效果,一个div里嵌套一个p标签;


由于p标签里面的内容是不固定的,所以没有办法设置他的固定宽度,于是没有设置宽度的时候发现了这个问题:


识别的宽度还是父级的宽度,怎么样才能获取到它真实的宽度呢?

直到我找到了这个属性:max-content。一个从来没有接触过的属性,以及它的相关属性:min-conten、fit-content. 这三个属性的区别是什么?


1、max-content

内容有多宽,盒子就有多宽,不会顾及父级盒子有多宽,只满足自己的需求。


2、min-content

装下单个最大内容的最小宽度,下面这个图片能够直观的说明这是什么意思:


如果没有最大宽度,一般就算指一个字符的宽度了

3、fit-content

在不超过父级盒子宽度的情况下,尽量撑开盒子满足自己的需求。

max-content和fit-content在自己内容不足以撑满父盒子时,宽度只为自己内容的最大宽度,不会再强行增大。

fit-content官方给出可以表示为一个公式:


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容