CSS3 max/min-content及fit-content、fill-available值的详解

c3中对width的值多了几个值:fill-availablemax-contentmin-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中的floatabsoluteinline-block的尺寸收缩表现是一样的。

OK,然后,有小伙伴会疑问,既然跟很多CSS声明有一样的表现,那为什么还要再弄个新东西呢?

就拿水平居中效果举例,首先浮动肯定不行,因为只有左浮动和右浮动;绝对定位压根不占据空间,普通流中根本无法应用,而inline-block需要父级使用text-align:center,而本身可能还需要text-align:left略烦。

width:fit-content可以没有这些烦恼,因为,width:fit-content可以实现元素收缩效果的同时,保持原本的block水平状态,于是,就可以直接使用margin:auto实现元素向内自适应同时的居中效果了。

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

 

总结:

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/822564.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

杰理-701-更换字库

杰里-701-更换字库显示 工具&#xff1a;链接&#xff1a;https://pan.baidu.com/s/1yMDatiRCaJj2ioKXF-H8GQ 把使用的字库文件放进该目录下 生成后的字库文件需要修改名称 把修改好名称的字库文件放到该目录下替换 代码,把所有语言的PIX修改未新替换的字库文件&#xff08;保…

00_Qt概述以及如何创建一个QT新项目

Qt概述 1.Qt概述1.1 什么是Qt1.2 Qt的发展史1.3 支持的平台1.4 Qt版本1.5 Qt的下载与安装1.6 Qt的优点 2.QT新项目创建3.pro文件4.主函数5.代码命名规范和快捷键 1.Qt概述 1.1 什么是Qt Qt是一个跨平台的C图形用户界面应用程序框架。它为应用程序开发者提供建立艺术级图形界面…

机器人视觉软件实现目标检测通常借助深度学习技术和计算机视觉算法

机器人视觉软件实现目标检测通常借助深度学习技术和计算机视觉算法。以下是一般而言的目标检测实现步骤&#xff1a; 1、数据收集与标注&#xff1a;首先需要收集包含目标物体的大量图像数据&#xff0c;并对这些图像进行标注&#xff0c;标注出目标物体的位置和类别信息。这些…

字符串算法题(第二十四天)

344. 反转字符串 题目 编写一个函数&#xff0c;其作用是将输入的字符串反转过来。输入字符串以字符数组 s 的形式给出。 不要给另外的数组分配额外的空间&#xff0c;你必须**原地修改输入数组**、使用 O(1) 的额外空间解决这一问题。 示例 1&#xff1a; 输入&#xff1…

富 格 林:策划安全方案阻挠受害

富 格 林指出&#xff0c;现货黄金作为一种全球性的投资产品&#xff0c;以其独特的价值储存功能和风险对冲能力&#xff0c;成为了许多投资者的首选投资项目。但是&#xff0c;如何在这复杂的投资市场中阻挠受害实现安全交易成为了大家的难题。下面富 格 林将提供一些基本的做…

一篇安装配置ubuntu22.04(步骤详细,配置成功)

一篇配置ubuntu22.04(步骤详细&#xff0c;配置成功) 官网下载相应的镜像 vitualbox安装ubuntu 新建虚拟机 第一步 第二步 第三步、按需分配内存、处理器个数、磁盘大小 第四步、一直下一步直至完成 配置虚拟机网络 第一步、先停止虚拟机 第二步、设置虚拟机网络 正常启…

【C++】一篇文章带你深入了解vector

目录 一、vector的介绍二、 标准库中的vector2.1 vector的常见接口说明2.1.1 vector对象的常见构造2.1.1.1 [无参构造函数](https://legacy.cplusplus.com/reference/vector/vector/vector/)2.1.1.2 [有参构造函数&#xff08;构造并初始化n个val&#xff09;](https://legacy.…

深度学习torch+cuda+torchvison+torchaudio版本匹配

官网版本&#xff1a;https://pytorch.org/get-started/previous-versions/ 还是在官网找好&#xff0c;再安装下载&#xff0c;否则&#xff0c;费时费力。 torch-2.1.0cu121-cp38-cp38-win_amd64.whltorchvision0.16.0torchaudio2.1.0 torch-1.8.0cu111-cp38-cp38-win_amd64.…

Advanced RAG 03:运用 RAGAs 与 LlamaIndex 评估 RAG 应用

编者按&#xff1a;目前&#xff0c;检索增强生成&#xff08;Retrieval Augmented Generation&#xff0c;RAG&#xff09;技术已经广泛使用于各种大模型应用场景。然而&#xff0c;如何准确评估 RAG 系统的性能和效果&#xff0c;一直是业界和学界共同关注的重点问题。若无法…

NASA数据集——ACEPOL气溶胶对气候和空气质量的影响,测量气溶胶的化学成分、粒度分布、高度剖面和光学特性

ACEPOL_AircraftRemoteSensing_RSP_Data 简介 ACEPOL 研究扫描偏振计&#xff08;RSP&#xff09;遥感数据&#xff08;ACEPOL_AircraftRemoteSensing_RSP_Data&#xff09;是在 ACEPOL 期间由 ER-2 上的研究扫描偏振计&#xff08;RSP&#xff09;收集的遥感测量数据。为了更…

设计模式之状态模式(下)

3&#xff09;共享状态 1.概述 在某些情况下&#xff0c;多个环境对象可能需要共享同一个状态&#xff0c;如果希望在系统中实现多个环境对象共享一个或多个状态对象&#xff0c;那么需要将这些状态对象定义为环境类的静态成员对象。 2.案例 背景&#xff1a;要求两个开关对…

vue3支持markdown显示格式

背景 公司内部文档大模型体验&#xff0c;需要一个demo做展示&#xff08;做了好多demo了......&#xff09;&#xff0c;文档大模型的场景后台配置实体库、同义词、文档库等&#xff0c;其中文档库中有各种格式的文档&#xff0c;体验者让大模型写个脚本、以表格数据输出。页面…

helm介绍-部署helm私有仓库案例

helm介绍-部署helm私有仓库案例 helm介绍-部署helm私有仓库案例 在Kubernetes中部署容器云的应用也是一项有挑战性的工作&#xff0c;Helm就是为了简化在Kubernetes中安装部署容器云应用的一个客户端工具。通过helm能够帮助开发者定义、安装和升级Kubernetes中的容器云应用&a…

前端-vue项目debugger调试

一、前言 有的时候接受同事一个项目&#xff0c;用框架不一样&#xff0c;写的也不太规范&#xff0c;那么就需要打断点去学习改项目的流程了。 那么vue项目是如何debugger调试呢&#xff1f; 二、操作 大概理解一下&#xff0c;vue项目启动&#xff0c;大概是先启动框架&am…

手写前端控制并发任务

思路&#xff1a; 主要通过异步等待队列执行的原理。 当前执行的任务数达到最大值的时候&#xff0c;再继续执行的任务会放入等待队列里&#xff0c;直到当前任务执行结束后&#xff0c;减少一个当前任务数&#xff0c;并且判断队列中是否有任务&#xff0c;如果有则按顺序执…

高效进行文件夹批量改名,轻松实现英文到中文的翻译,让你的文件夹管理更高效!

在数字化时代&#xff0c;我们每天都在与无数的文件夹打交道。而管理这些文件夹&#xff0c;尤其是为它们命名&#xff0c;往往成为一项繁琐而耗时的任务。尤其是当文件夹名以英文命名时&#xff0c;对于非英语用户来说&#xff0c;理解和记忆都可能会成为一道难题。那么如何翻…

LeetCode 0924.尽量减少恶意软件的传播:连通块染色(以BFS为例)

【LetMeFly】924.尽量减少恶意软件的传播&#xff1a;连通块染色&#xff08;以BFS为例&#xff09; 力扣题目链接&#xff1a;https://leetcode.cn/problems/minimize-malware-spread/ 给出了一个由 n 个节点组成的网络&#xff0c;用 n n 个邻接矩阵图 graph 表示。在节点…

HarmonyOS4-数据持久化

轻量级preferences&#xff1a; 关系型数据库&#xff1a; 增删改&#xff1a; 查询语句&#xff1a; 具体详情代码可参与源码&#xff1a; 黑马大佬写的。 harmonyos-lessons: 黑马程序员B站HarmonyOS课程的基础篇代码部分

热门的软件测试趋势趋势分析

放眼全球&#xff0c;了解技术发展的边界和趋势&#xff0c;有助于组织和个人的发展及竞争力的提升&#xff0c;偶尔看到国外某网站的一篇文章&#xff0c;读来颇值得参考&#xff0c;简单翻译过来&#xff0c;分享一下。 也许这篇文章会给你一份指南&#xff0c;让你快速成长…

【电路笔记】-数字缓冲器

数字缓冲器 文章目录 数字缓冲器1、概述2、单输入数字缓冲器3、三态缓冲器3.1 有效“高”三态缓冲器3.2 有效“高”反相三态缓冲器3.3 有效“低”三态缓冲器3.4 有效“低”反相三态缓冲器4、三态缓冲器控制数字缓冲器和三态缓冲器可以在数字电路中提供电流放大以驱动输出负载。…