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;标注出目标物体的位置和类别信息。这些…

一篇安装配置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.…

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

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

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

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

前端-vue项目debugger调试

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

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

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

HarmonyOS4-数据持久化

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

C语言学习/复习20

一、调试 1.实例1&#xff1a; 经调试&#xff0c;该代码因数组越界会死循环 二、优秀的代码 注意事项&#xff1a;assert()返回真假并决定是否报错 常量指针本质是指针&#xff0c;常量修饰它&#xff0c;表示这个指针是一个指向常量的指针&#xff08;变量&#xff09…

MySQL 基础使用

文章目录 一、Navicat 工具链接 Mysql二、数据库的使用1.常用数据类型2. 建表 create3. 删表 drop4. insert 插入数据5. select 查询数据6. update 修改数据7. delete 删除记录truncate table 删除数据 三、字段约束字段1. 主键 自增delete和truncate自增长字段的影响 2. 非空…

Tomcat 获取客户端真实IP X-Forwarded-For

Tomcat 获取客户端真实IP X-Forwarded-For 代码实现&#xff1a; 在Host标签下面添加代码&#xff1a; <Valve className"org.apache.catalina.valves.RemoteIpValve" remoteIpHeader"x-forwarded-for" remoteIpProxiesHeader"x-forwarded-by&q…

Linux命令学习—Iptables 防火墙(上)

1.1、防火墙 1、防火墙的定义 所谓防火墙指的是一个由软件和硬件设备组合而成、在内部网和外部网之间、专用网与公共网之间的界面上 构造的保护屏障.是一种获取安全性方法的形象说法&#xff0c;它是一种计算机硬件和软件的结合&#xff0c;使 Internet 与 Intranet 之间建立起…

大功率Boost升压电路实例设计

项目介绍及参数要求 指标参数光伏额定功率: 4000W光伏最大输入电压: 350V光伏最小输入电压: 150V母线电压(Boost电路输出电压): 600V电流纹波率

野生动物保护视频AI智能监管方案,撑起智能保护伞,守护野生动物

一、背景 在当今世界&#xff0c;野生动物保护已经成为全球性的重要议题。然而&#xff0c;由于野生动物生存环境的不断恶化以及非法狩猎等活动的盛行&#xff0c;保护野生动物变得尤为迫切。为了更有效地保护野生动物&#xff0c;利用视频智能监管技术成为一种可行的方案。 …

Java springboot使用EasyExcel读Excel文件,映射不到属性值,对象属性值都是null

如果你的类上有这个注解&#xff0c;去掉火或注释掉就可以了 Accessors(chain true)解决方法

IO流高级流

前言 缓冲区能够提升输入输出的效率 虽然FileReader和FileWriter中也有缓冲区 但是BufferedReader和BufferWriter有两个非常好用的方法. 缓冲流 字节缓冲流 import java.io.*;public class BufferedStreamDemo {public static void main(String[] args) throws IOExceptio…

「JavaEE」线程

&#x1f387;个人主页&#xff1a;Ice_Sugar_7 &#x1f387;所属专栏&#xff1a;JavaEE &#x1f387;欢迎点赞收藏加关注哦&#xff01; 线程 &#x1f349;线程&#x1f34c;多线程&#x1f34c;线程与进程的联系&区别&#x1f34c;多线程编程&#x1f34c;创建线程&a…