欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

css3的新增的width属性的值

程序员文章站 2022-03-10 22:46:14
...

用法:

div{
	width:fit-content;
}

1、fit-content(会根据行宽调整,会自动换行。)

个人觉得这个挺好的。平时开发的时候可以用上。

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

2、max-content、max-content(文字超出行宽,就会出现横向滚动条,因此,它的表现是文字不会换行的。)

跟随有定宽的的最大最小宽度,不会进行收缩。

3、fill-available(就像一个块级元素一样,内容不足,空格来凑的感觉)

它们的效果图和区别下图就可以看得很清楚。
css3的新增的width属性的值
**

max-content 和fit-content,
当元素内容没有超出行宽的时候,最终的宽度都是内容的宽度。
而超出行宽的时候,max-content的表现是不换行,出现横向滚动条,fit-content的表现是会换行。

**