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实现元素向内自适应同时的居中效果了。

html 复制代码
<div class="w-box">
	<img src="/static/logo.png">
</div>
css 复制代码
.w-box {
		background-color: #f0f3f9;
		padding: 10px;
		/* 这里左右方向是auto */
		margin: 0 auto;
		overflow: hidden;
		width: fit-content;
	}

总结:

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

相关推荐
三小河几秒前
overflow:auto 滚动的问题,以及flex 布局中如何设置
前端·javascript
薛定谔的算法4 分钟前
phoneGPT:构建专业领域的检索增强型智能问答系统
前端·数据库·后端
Hilaku5 分钟前
Token已过期,我是如何实现无感刷新Token的?
前端·javascript·面试
小文刀6968 分钟前
2025-35st-w-日常开发总结
前端
我是日安11 分钟前
从零到一打造 Vue3 响应式系统 Day 8 - Effect:深入剖析嵌套 effect
前端·vue.js
小lan猫15 分钟前
React学习笔记(一)
前端·react.js
晨米酱15 分钟前
JavaScript 中"对象即函数"设计模式
前端·设计模式
拜无忧16 分钟前
【教程】Nuxt v4 入门指南与实践 (vue前端角度开发)
前端·nuxt.js
云枫晖19 分钟前
手写Promise-什么是Promise
前端·javascript
拜无忧19 分钟前
html,svg,花海扩散效果
前端·css·svg