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值的特性。

相关推荐
1024小神8 分钟前
next项目使用状态管理zustand说明
前端
Asort9 分钟前
JavaScript设计模式(八):组合模式(Composite)——构建灵活可扩展的树形对象结构
前端·javascript·设计模式
刘永胜是我10 分钟前
【iTerm2 实用技巧】解决两大顽疾:历史记录看不全 & 鼠标滚轮失灵
前端·iterm
returnfalse12 分钟前
🔥 解密StreamParser:让数据流解析变得如此优雅!
前端
凉城a13 分钟前
经常看到的IPv4、IPv6到底是什么?
前端·后端·tcp/ip
jserTang19 分钟前
Cursor Plan Mode:AI 终于知道先想后做了
前端·后端·cursor
木觞清24 分钟前
喜马拉雅音频链接逆向实战
开发语言·前端·javascript
一枚前端小能手28 分钟前
「周更第6期」实用JS库推荐:InversifyJS
前端·javascript
Hilaku29 分钟前
"事件委托"这个老古董,在现代React/Vue里还有用武之地吗?
前端·javascript·vue.js
前端缘梦34 分钟前
Webpack 5 核心升级指南:从配置优化到性能提升的完整实践
前端·面试·webpack